同位素和媒体查询答案

【问题标题】：Isotope & Media Queries同位素和媒体查询
【发布时间】：2015-08-19 07:11:14
【问题描述】：

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

基本上，我正在尝试创建一个 fluid 和 responsive 投资组合 - 使用 Isotope 过滤项目。过滤效果很好，4 列完全流畅，调整窗口大小时一切看起来都很棒。

但是，对于移动设备和平板电脑布局，我只需要将 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 }
            });
        }
    });
});

没用:(

任何帮助将不胜感激。

【问题讨论】：

标签： responsive-design media-queries jquery-isotope fluid

【解决方案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;
  }
}

【讨论】：

我意识到为什么我的不工作了。在$container.isotope({ 函数中，我使用的是masonry: {columnWidth: $container.width() / 4} 而不仅仅是columns: 4。排序。再次感谢。
嗨@Salmonface我有同样的问题，当窗口缩小时，我似乎无法将布局更改为两列......你是如何解决这个问题的？ var $container = $('#filter_container'); $container.isotope({ itemSelector : '.element', resizable: false, // disable normal resizing masonry: { columnWidth: $container.width() / 3 } }); // update columnWidth on window resize $(window).smartresize(function(){ $container.isotope({ // update columnWidth to a percentage of container width masonry: { columnWidth: $container.width() / 3 } }); });
嗨 @Grundizer 我使用 jQuery 媒体查询修复了它：$(window).smartresize(function(){ if ($(window).width() < 768) { $container.isotope({ columns: 2 });} if ($(window).width() > 768) { $container.isotope({ columns: 3 });}}); 但是，我的网格是流动的，所以我的列宽和边距基于百分比 - 这显然需要通过调整列数时的媒体查询。
请参阅我的 website 的投资组合部分以获取示例 - 抱歉，代码组织得不是很好。

【解决方案2】：

我认为有一种更好的方式仍然可以使用 css 媒体查询。在这里查看我的答案：https://stackoverflow.com/a/20270911/1010892

希望有帮助！！

【讨论】：