jquery - 更自然的包裹/ float

标签 jquery html css css-float word-wrap

我正在尝试构建一个非常基本的缩略图库。当您点击缩略图时,它会扩展为三种尺寸之一(正方形、垂直或水平)。
我遇到的问题是,当它展开时,图片希望保持相同的顺序,而不是用缩略图填充空白 block 。显然,先写的内容​​先出现——这通常是有道理的。我想知道是否有一种方法可以使图像从流中弹出并像在 InDesign 中使用文本环绕工作的 block 一样工作。
这是我到目前为止所拥有的:http://fiendconsulting.com/uglyduck_testing/toggle_test.html
有什么想法吗?

我在这方面不是很擅长,过去几个月我没有练习任何类型的编程,所以请放轻松并保持简单。提前致谢。 -T

最佳答案

我认为 masonry jquery 插件会做你想做的事。以下是我认为您正在寻找的内容的一个示例:

http://www.swiftkey.net/en/our-company/#team

他们使用一个名为 isotope 的 jquery 插件(这是一个更完整的 masonry 版本,您需要付费)。它还需要一些高级 ish 类型的 jquery 技能来处理回调等等。

他们所做的背后的原则是隐藏较大的内容,然后当您单击肖像时隐藏较小的图像并显示较大的图像,然后重新布局砌体网格。您应该能够使用它并从中获得一些非常好的功能。它非常时尚。

关于jquery - 更自然的包裹/ float ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17770204/

相关文章:

css - 全屏 HTML5 视频

javascript - jQuery:如何返回附加元素

html - 在 div 中悬停缩放图像

javascript - Swiper - 方法不起作用 - mySwiper.slideTo 不是函数

html - 在新的 DIV HTML 标签中导入现有的 CSS 类

html - 放置一个左边有绝对空间,顶部有 float 特性的方 block

android - 使用 jQuery Mobile 在 iOS 和 Android 中的标签的子元素上不触发单击事件

html - 设置一行 DIV 中最后一个 DIV 的样式

jquery - 在 select with optgroup 中使用 selectedOptions Knockout 绑定(bind)来预选择多个值

php - jquery 无法索引 SQL 列名