jQuery Isotope - 具有两个不同大小元素的流体布局

Question

我在页面上有一个基本的照片布局(用于作品集)。有两种不同尺寸的图像 block ，较大的图像 block 与较小的图像 block 成比例，并且正好是宽度和高度的两倍， block 或窗口之间没有边距。只有几个较大的 block 与几十个较小的 block 混合在一起。它是一种响应式设计，因此在全尺寸网站上有 5 个 20% 列，当窗口大小降至某个宽度以下时，有 3 个 33.333% 列，所有这些都在 100% 最大宽度容器内。每 block 积木内部的图像均使用 CSS 设置为 100% 宽度和自动高度。我添加了一个线框来说明我所描述的内容。

我遇到的问题是让同位素响应流体布局。如果我在比最大宽度更宽的窗口中加载页面，它会完全按照预期放置 block 。然而，当我将浏览器窗口缩小到最大宽度以下时，这些 block 开始变得非常不稳定，有以下几种变化:堆叠在单列中；堆放在两列中，中间有一个空列；图像之间的间隙；在大图像下方留一个空行。

我可能没有很好地解释自己，只是想知道是否有人有使用同位素进行流体布局的经验，并且可能有一些见解。

Answer 1

我能够通过省略同位素响应 demo here 中的列计算代码行来实现此目的。 。

$container.isotope({
    itemSelector : '.thumb',
    //disable resizing
    resizable: false,
});

//update columnWidth on window resize
$(window).smartresize(function(){
    $container.isotope({
    });
});

这保留了动画“智能调整大小”功能，但允许您使用常规 CSS 媒体查询来控制列数(将元素“.thumb”设置为媒体查询中容器的所需百分比)。