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％等）。

希望这适合你！

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

1 个答案: