1

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

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

我可能没有很好地解释自己，但只是想知道是否有人有使用 Isotope 与流体布局的经验并且可能有一些见识。

布局

4

2 回答 2

5

我可以通过省略同位素响应演示中的列计算代码行来实现这一点。

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

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

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

于 2012-02-14T02:53:29.020 回答
1

我正在研究一个存在类似问题的布局，并使用 Isotope 的新包装布局选项解决了它。真是天赐良机！— http://isotope.metafizzy.co/layout-modes/packery.html

于 2014-09-15T10:54:30.860 回答