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

  • 使用 PHP 获取 2 个同名 HTML 输入标签的值

    假设我有下表

  • 嵌套辅助函数和性能

    嵌套辅助函数对于使代码更易于理解非常有用 谷歌甚至建议在他们的应用程序中使用嵌套函数时尚指南 https google styleguide googlecode com svn trunk javascriptguide xml Nest

  • Angular 2 runOutsideAngular 仍然改变 UI

    从我的理解来看runOutsideAngular https angular io docs ts latest api core index NgZone class html runOutsideAngular anchor 如果我需要

  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式

  • Sequelize.js - “不关联到”

    我在从数据库获取完整数据时遇到一些问题 那是我的模型 User module exports function sequelize DataTypes return sequelize define user id type DataTyp

  • HTML5 有效的命名空间标签前缀

    验证我的页面时 W3 Validator 会给我一个错误

  • 当条件评估为 true 时获取元素（扩展 ElementArrayFinder）

    我们有一个菜单 表示为ul gt li列表 简化 ul class dropdown menu li class ng scope a href class ng binding Menu Item 1 a li li li ul

  • jQuery 检索和设置 html select 元素的选定选项值

    我正在尝试使用 jQuery 检索并设置选择元素 下拉列表 的选定值 为了检索我已经尝试过 myId find selected val 也 myId val 但两者都返回未定义 任何对此问题的见解将不胜感激 要获取 设置选择元素的实际 s

  • div Hello div div Howdy dere pardner div div div 我明白它的作用 但为什么叫这个名字both 什么是both mean 两者的意思是 一组两件事中的每一项 左 和 右 两件事

  • IE bug：具有不透明背景色的绝对定位元素

    我有一个绝对定位的 DIV 需要捕获 onclick 事件 事实证明 在 IE7 中 DIV 似乎没有诸如单击甚至光标之类的 足迹 例如 div width 200px height 200px position absolute bord

  • Cosmos DB 中的 MaxItemCount 源选项属性不起作用

    我正在尝试编写一个运行 SQL 查询的简单存储过程 并且我想通过使用 MaxItemCount 属性来限制结果 查询生成 3 个文档 但我只想返回 1 个文档 我使用 MaxItemCount 属性强制执行此限制 但这似乎不起作用 func

  • 删除

    好的 我有一个小菜单栏 菜单内的三个元素还有更多的子菜单 但是菜单栏中的元素之间有不必要的间距 而且我创建的子菜单有不必要的背景宽度 我在代码中将其涂成白色以使读者理解 由于这种不必要的宽度 即使鼠标悬停在不可见的宽度上 在本例中为白色 本

  • 如何按字母顺序排序并先小写排序

    如何获得以下排序的结果Food to Eat然后是 食物123 显然 第二个较低的 o 应该将 要吃的食物 带到排序后的第一个项目中 我很惊讶这个问题不容易通过谷歌找到答案 这个壮举没有包含在 javascript 标准中也让我感到惊讶 F

  • Jquery 两个字段的时间差（以小时为单位）

    我的表单中有两个字段 用户可以在其中选择输入时间 start time end time 我想在更改这些字段时重新计算另一个字段的值 我想做的是获取两次之间的小时数 例如 如果我的开始时间为 5 30 结束时间为 7 50 我想将结果 2

  • 将 div 文本分配给变量然后显示它

    我有一个简单的任务 我试图完成学习 JavaScript 但一直无法找到明确的答案 这是代码 div Testing div 基本上我希望将方框 div 中的文本存储到变量中 然后 我想在页面的不同部分显示该变量的文本 使用上面的代码我得到

  • 将多个对象传递给我的控制器

    我将一个对象传递给我的控制器 如下所示 var form JSON stringify subRevisedRequest frmRevised val subSubcontractor frmSubcontractor val subDe

  • 如何使用引用该键的变量来获取对象键中的值？

    我有一个对象 我可以引用密钥a如下 var obj a A b B c C console log obj a return string A 我想通过使用变量引用对象键来获取值 如下所示 var name a console log ob

  • WooCommerce 使用 AJAX 设置购物车数量？

    我已经为此绞尽脑汁好几天了 需要一些指导 我正在为 WooCommerce 网站完全从头开始制作自定义主题 现在我正在尝试让购物车功能正常工作 我一直试图使用按钮 来更新购物车中产品的数量 对我来说问题似乎是WC 我在functions p

  • 从顶部开始在同一水平线上显示同一行中的两个 div

    这是我的代码 floating box display inline block width 150px margin 10px border 3px solid 73AD21 after box border 3px solid red

  • jqGrid刷新本地数据（JSON对象）

    我正在尝试将 jqGrid 与本地数据一起使用 但发现了几个问题 我正在初始化这样的事情 function refreshGrid grid results grid jqGrid data results datatype local c

随机推荐

  • 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

热门标签