将 Isotope 与响应式图像的媒体查询相结合

Question

我知道以前有人问过这个问题，但我找到的所有答案都是指更改响应式同位素布局上的列数。这样做的问题是，在调整浏览器大小时，容器中存在间隙。

我所追求的是使用同位素 + 媒体查询，以便拇指调整到容器大小，同时减少窗口调整大小时的列数。

$(document).ready(function () {

var $container = $('#right');
$container.isotope({
    layoutMode: 'fitRows',
    itemSelector: '.thumbs',
    animationEngine: 'best-available',
    resizable: false,

});

$(window).smartresize(function () {
    $container.isotope({
        // update columnWidth to a percentage of container width
        masonry: {
            columnWidth: $container.width() / 3
        }
    });
});

$(window).smartresize();

});

这是我的 jsfiddle：

http://jsfiddle.net/Alga/K4EXU/2/

它有点工作，但有一些奇怪的过渡。我相信媒体查询和同位素之间存在一些冲突。

谁能帮忙？

非常感谢！

Answer 1

今天我已经为此苦苦挣扎了好几个小时 - 我尝试了完美的砌体，但由于某种原因它不起作用......然后我随机遇到了https://github.com/cubica/isotope-sloppy-masonry

...到目前为止一切顺利！我的设置是从小屏幕开始，使我的同位素项目宽度为 100%，然后使用媒体查询增加列的数量（50%、33% 等）。

希望这对你有用！