Question

绝对把头发拉出来。在GitHub上似乎没有提供黑白解决方案 - 这很奇怪，因为它似乎是一个相当简单的概念。也许我只是不明白。

基本上，我正在尝试创建流畅和响应组合 - 使用Isotope过滤项目。过滤工作正常，4列完全流畅，当你调整窗口大小时，一切看起来都很棒。

HOWEVER ，对于移动设备和平板电脑布局，我只需要从 4列布局调整为 2列布局。

我试过了：

$(window).load(function(){

    var $container = $('#thumbs');
    $container.isotope({
        filter: '*',
        animationOptions: {
            duration: 750,
            easing: 'linear',
            queue: false,
       },
    });

    // initialize Isotope
    $container.isotope({
      // options...
      resizable: false, // disable normal resizing
      // set columnWidth to a percentage of container width
      masonry: { columnWidth: $container.width() / 4 },
    });

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

// My attempt at using media queries to change 'columnWidth'
    $(window).resize(function() {
        var width = $(window).width();
        if (width < 768) {
            $container.isotope( {
                // update columnWidth to half of container width
                masonry: { columnWidth: $container.width() / 2 }
            });
        }
    });
});

无效:(

非常感谢任何帮助。

Answer 1

这应该可以设置您的列数。然后你只需要用columns划分。

var columns;

// set column number
setColumns();

// rerun function when window is resized 
$(window).on('resize', function() {
  setColumns();
});

// the function to decide the number of columns
function setColumns() {
  if($(window).width() <= 768) {
    columns = 2;
  } else {
    columns = 4;
  }
}

Answer 2

我认为还有一种更好的方法，你仍然可以使用css媒体查询。请在此处查看我的回答：https://stackoverflow.com/a/20270911/1010892

希望有所帮助!!

同位素和媒体查询

2 个答案: