程序员经验分享-hwhale

tumblr 和 google+ 如何像拼图一样堆叠图像？

2023-12-22

我想要制作一个图像库，并且想知道如何像 Google 和 tumblr 那样堆叠图像。

我的意思是，当你查看 tumblr 的存档页面时，它们都堆积在列中：http://the-overlook-hotel.tumblr.com/archive http://the-overlook-hotel.tumblr.com/archive

不过我希望它们也能跨列重叠，我在 tumblr 上的一个名为 tessellate 的主题中看到过这样做：http://www.tumblr.com/theme/30524 http://www.tumblr.com/theme/30524

这是一个例子。继续滚动查看图像或嵌入视频将跨两列的部分：http://idotesssellate.tumblr.com/ http://idotessellate.tumblr.com/（抱歉我找不到更好的例子）

谷歌在 Google+ 照片页面上做了类似的事情：https://plus.google.com/u/0/photos/111395306401981598462/albums/5678415422536656161 https://plus.google.com/u/0/photos/111395306401981598462/albums/5678415422536656161

这种东西有名字吗？我怎样才能实现它或者我可以在哪里获得这些结果

就好像他们坐在彼此身上一样。


Tumbler 似乎使用 JavaScript 来计算图像的布局。页面加载后，它会为每个图像设置绝对位置。如果调整窗口大小，则会重新计算每个图像的位置。

谷歌似乎已经预先订购了这些图像，因此它们使用 float: left 很好地组合在一起。您会注意到，除了第一张图像之外，其他图像都是按行排序的。当您调整浏览器大小时，图像会放大或缩小以保持布局。

要自己执行此操作，请查看jQuery Masonry 插件 http://masonry.desandro.com/.

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

html

css

AJAX

tumblr 和 google+ 如何像拼图一样堆叠图像？ 的相关文章

  • JavaScript 继承；调用和原型

    要在Javascript中实现继承 通常需要执行以下两个步骤 假设我有一个基类 Animal var Animal function name this name name 我现在想从中派生一个子类 Dog 所以我想说 var Dog fu

  • 如何通过单击链接来更改 div 的内容？

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st

  • 合并 2 个大型 CSS 文件的有效方法

    我正在寻找一个可以合并 2 个大型 CSS 文件的工具 到目前为止我尝试过的所有方法 例如CSSMerge 都没有成功 其中一些只是随机删除属性 其他人则因 webkit 和 moz 等非标准属性而窒息 并给我错误 我还需要保留每条规则大小

  • 如何使用角度材料在具有可扩展行的表格中创建嵌套垫表

    我有以下数据 id c9d5ab1a subdomain wing domain aircraft part id c9d5ab1a info mimetype application json info dependent parent

  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook？

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为

  • CSS 到底如何计算相对尺寸

    我想更好地理解某些 CSS 行为 这与具体问题无关 我只是在调试网站时遇到的 让我们在固定位置的 div 中放置一个全宽图像 div img style width 100 src https via placeholder com 150

  • mongodb 聚合 - 累积字段的不同组值

    如果我有Player表格文件 name String score Int 我有Group文档 其中组代表玩家列表 groupName String players ObjectID 玩家可以属于多个组 我想做一个聚合Player文档 按以下

  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做

  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显

  • 编辑第一个选项名称

    我有以下我无法访问的代码 我想要做的是将一些文本添加到现在为空的第一个选项中 诸如 选择地址 之类的文本

  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden

  • 覆盖 jQuery 验证 MVC4 中的默认设置

    要覆盖查询验证插件 请在文件 http docs jquery com Plugins Validation validate toptions 推荐的方式是 selector validate invalidHandler functio

  • 使用 Jade 评估自定义 javascript 方法 (CircularJSON)

    我想通过 Jade 将一个对象解析为客户端 JavaScript 通常这会起作用 script var object JSON parse JSON stringify object but my object is circular ht

  • 主页（网格）上的缩略图现在显得模糊。如何纠正？

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小

  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是

  • css3按钮背景颜色无限过渡

    有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色 然后又回到灰色 一个很好的例子是默认操作按钮是可可 我知道这可以在 javascript 中完成 但我宁愿只使用 css 来完成此操作 您好 我已经通过 CSS3 动画制作了按钮

  • 什么是 WKWebView 中的 WKErrorDomain 错误 4

    fatal error LPWebView encounters an error Error Domain WKErrorDomain Code 4 A JavaScript exception occurred UserInfo 0x7

  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011

  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo

  • 使用velocity.js制作可拖动元素的动画

    我正在使用velocity js 为用户拖动的可拖动 SVG 元素设置动画 然而 velocity js 将先前的 mousemove 坐标排队并通过所有后续的 mousemove 坐标进行动画处理 我想要的是velocity js 不要对

随机推荐

  • Chrome 扩展选项卡从后台发送消息到内容脚本错误

    内容脚本 js chrome runtime onMessage addListener function request sender sendResponse console log sender tab from a content

  • R - 使用非标准评估检查字符串是否是有效的数学表达式

    我想检查下面的字符串是否是有效的数学表达式 s1 sin x s2 sin x m s3 sin s4 sin xm 我所说的 有效 是指该表达式是以下内容的组合 运算符 必须与变量或常量结合使用 变量x and or m 常数 根据这个定

  • 如何统一 Python Pyramid 视图来处理 Ajax/html 表单 POST

    我的 Python Pyramid 应用程序中有一些 HTML 表单 我希望它们在启用 JavaScript 和禁用 JavaScript 时通过 AJAX 工作 现在我对 AJAX 和普通表单帖子使用不同的视图 但这些功能的代码似乎几乎相

  • ASP.Net Web API 帮助页面返回空输出

    我有一个预先存在的 MVC 应用程序 我使用 Nuget 添加了 Web API 和 Web API 自文档 虽然 Web API 控制器运行良好 返回对 HTTP 请求的有效响应 但帮助控制器找不到任何要记录的 Web API 方法 在帮

  • PowerShell FINDSTR 等效项？

    DOS FINDSTR 的等效项是什么电源外壳 http en wikipedia org wiki Windows PowerShell 我需要在一堆日志文件中搜索 错误 这是快速答案 Get ChildItem Recurse Incl

  • 自定义 UIBarButtonItem 的活动区域更小

    我有一个带有自定义 UIBarButtonItem 的 UINavigationBar 它使用 UIButton 作为其自定义视图 问题是 自定义按钮的活动区域太大 如果我点击按钮外至少 40 像素 它仍然会被注册为点击按钮 这会导致意外点

  • 在 Cython 中生成随机数的规范方法

    生成伪均匀随机数 0 1 中的双精度数 的最佳方法是什么 跨平台 最好具有相同的相同样本序列 线程安全 显式传递 prng 或 内部使用线程本地状态 不带 GIL 锁 可轻松包装在 Cython 中 曾经有一个类似的post https s

  • Webpack 是否足够智能，可以让 jQuery 变得更轻？

    我知道这是一个非常简单的问题 但我还没有看到任何像这样简单的问题 答案 我正在尝试确定 jQuery 是否值得保留在我的 React 应用程序中 并且我几乎完全将它用于 ajax webpack 是否足够智能 可以仅在捆绑包中包含 jQue

  • JVM 属性 -Dfile.encoding=UTF8 还是 UTF-8？

    我想知道将文件编码设置为 UTF 8 的 Java 虚拟机 JVM 属性的值是多少 我放吗 Dfile encoding UTF8 or Dfile encoding UTF 8 这将是 UTF8 See here http downloa

  • 处理 winform 文本框上的箭头键事件而不覆盖

    我遇到一种情况 我获得了一个 WinForms TextBox 实例 我想将自动完成功能附加到该实例 我已经解决了自动完成 字符串匹配 下拉 的问题 并且到目前为止它工作可靠 使用键盘导航下拉菜单的能力是什么 这是此类 UI 的标准 自然的

  • 多租户应用程序中的 MyBatis Spring

    您好 在多租户中使用 MyBatis spring 时需要一些帮助 应用 是否可以 特别是因为我不知道如何 可以使用 sqlSessionFactory 配置 MapperScannerConfigurer 运行 这是另一种使用插件 也称为

  • “依赖项”不能应用于“(groovy.lang.Closure)”

    我无法修复此错误 dependencies cannot be applied to groovy lang Closure 这是我的 gradle 文件 buildscript repositories maven url http do

  • 出现异常时继续执行

    下面是我要执行的脚本 这里的问题是一旦发生异常它就会停止执行 我用过continue在 catch 块中 但这不起作用 即使发生异常后 我如何让它工作 它应该循环foreach 我也用过一个while true 循环 但进入了无限循环 该怎

  • 注解反射（使用 getAnnotation）不起作用

    我必须按照代码来检查我的实体是否model has a nullable false或字段上的类似注释 import javax persistence Column import private boolean isRequired It

  • jhipster - gyp 动词 `which` 失败错误：未找到：python2

    以下是当我尝试使用 JHipster 生成新项目时出现的错误 gyp verb check python checking for Python executable python2 in the PATH gyp verb which f

  • 是否强制要求短路逻辑运算符？以及评估顺序？

    有ANSI标准吗mandate在 C 或 C 中要短路的逻辑运算符 我很困惑 因为我记得 K R 书中说你的代码不应该依赖于这些被短路的操作 因为它们可能不会 有人可以指出标准中哪里说逻辑操作总是短路的吗 我对 C 最感兴趣 对于 C 的答

  • 使用动态 form_class 更新视图

    我想动态改变form class of an UpdateViewDjango 1 6 中的 CBV 我尝试使用 get context data 来执行此操作 但这没有帮助 因为表单已经初始化 所以这需要在 init 我猜 这是我尝试过的

  • R中的zoo对象和ts对象有什么区别？

    我想知道使用上的差异ts or zoo 功能 动物园对象的索引属性中的时间值 可能不规则 在控制台上显示为行名称print zoo方法以及矩阵或原子向量中的值 这些值对可以使用的值进行了限制 通常是数字 但必须全部是单一模式 即不是像数据帧

  • 我应该在程序结束时删除 C++ 中的大树集合还是将其留给操作系统？ [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 这可能是个有点愚蠢的问题 我应该打电话吗delete在节目结束时的巨大地图 场景上 假设整个程序都需要地图 集合 delete是返回前的最后一行

  • tumblr 和 google+ 如何像拼图一样堆叠图像？

    我想要制作一个图像库 并且想知道如何像 Google 和 tumblr 那样堆叠图像 我的意思是 当你查看 tumblr 的存档页面时 它们都堆积在列中 http the overlook hotel tumblr com archive

热门标签