程序员经验分享-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+ 如何像拼图一样堆叠图像？ 的相关文章

随机推荐

  • 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

热门标签