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

Question

我在页面上有一个基本的照片布局（用于投资组合）。有两种不同尺寸的图像砖，较大的图像砖与较小且正好是宽度和高度的两倍成比例，并且块或窗口之间没有边距。只有几个较大的块与几十个较小的块混合在一起。它是一个响应式设计，因此当窗口大小下降到某个宽度以下时，全尺寸网站上的列数为5％，列数为33.333％，所有列都在100％最大宽度容器内。在每块砖内，图像设置为100％宽度和CSS自动高度。我已经包含了一个线框来说明我所描述的内容。

我遇到的问题是让同位素响应流体布局。如果我在比最大宽度宽的窗口中加载页面，它会完全按预期放置块。但是，当我将浏览器窗口缩小到最大宽度以下时，块开始变得非常糟糕，在某些变体中：堆叠在一列中;堆叠在两列中，空列之间;图像之间的差距;在大图像下留下一个空行。

我可能不会很好地解释自己，但只是想知道是否有人使用具有流畅布局的Isotope并且可能有一些洞察力。

Answer 1

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

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

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

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

Answer 2

我正在制作一个带有类似问题的布局，并使用Isotope的新打包布局选项解决了这个问题。真是个天赐之物！ - http://isotope.metafizzy.co/layout-modes/packery.html