jquery - 像 Windows 8 磁贴一样对 div 进行排序

Question

小提琴- 这是示例。

我正在尝试做一些看起来完全像 Windows 8 瓷砖网格的事情。我们有 3 种类型的瓷砖尺寸

我的意思是，瓷砖不需要精确排序，但它们之间不能有空格。

我检查了Masonry, Isotope, freetile, vGrid，Wookmark并且出现了同样的问题：空白。

我知道有时在逻辑上可能无法避免差距，但在这种情况下确实是可能的。

它不必是 jquery 插件类型的解决方案 - 我唯一需要的是不同的瓷砖，但适合彼此尺寸并在我“打包”它们时避免它们之间的间隙。

$('article').freetile();

score 1 · Accepted Answer

在 SO 上搜索 Isotope + gaps 和 Masonry + gaps。已经处理过无数次了。根据 DOM 中 1x1、2x1 和 2x2 div 的出现顺序，在某些浏览器宽度下，“间隙”是不可避免的，尤其是当您的元素很大时。

score 0 · Accepted Answer

我已经做到了。关键是设置columnWidth。如果图块之间有 150 像素和 10 像素的边距，那么它就是 columnWidth:160。

2 回答 2