jQuery Masonry 和媒体查询 - 响应式

Question

我正在尝试在响应式设计中使用 jQuery Masonry，但它无法正常工作。
有时，不会显示所需的列数。

例子:
Windows 大小:1024 像素
其实这里应该出现3列，但是只显示了2列。从 1038px 开始，3 列可见..

我不明白我做错了什么.. 有帮助吗？

网站: http://www.len-lenlikes.com/#go_posts

masonry_responsive_css:

#site-content {
  max-width: 82em;
  margin-top: 2.2%;
  min-height: 700px;
}

#list {
  width: 100%;
  margin-left: 0;
  overflow: hidden;
  margin-bottom: -1.875em;
}


.item {
  width: 100%;
  margin-bottom: 2.2%;
  float: left;
}

.item img {
  padding-left: 2%;
  padding-right: 2%;
  width: 100%;
  height: auto;
}

@media (min-width: 47em) {
  #site-content {
    margin: 1.1% auto;
  }
}

@media (min-width: 64em) {
  #site-content {
    background-color: red;
  }
}
@media (min-width: 90em) {
  #site-content {
    margin-top: 4.4%;
  }
}
@media (min-width: 100em) {
  #site-content {
    max-width: 114em;
    margin-top: 2.8%;
  }
}

@media (min-width: 47em) {
  .item {
    width: 50%;
    margin-top: 0.6%;
  }
}
@media (min-width: 64em) {
  .item {
    width: 33.2%;
    margin-top: -1%;
  }
}
@media (min-width: 100em) {
  .item {
    width: 25%;
  }
}

@media (min-width: 47em) {
  .item img {
    padding-left: 9px;
    padding-right: 9px;
  }
}

masonry_responsive_js:

 // update columnWidth on window resize
var columns = 1,
    setColumns = function () {
        if (jQuery(window).width() < 767) {
            columns = 1
        } else if (jQuery(window).width() < 1023) {
            columns = 2
        } else if (jQuery(window).width() < 1760) {
            columns = 3
        } else {
            columns = 4
        }
    }

    setColumns();
        jQuery(window).resize(setColumns);


//container for the posts (images)
var $container = jQuery('#list');


//Detect when images have been loaded.
$container.imagesLoaded(function () {
    //Initialize Masonry
     $container.masonry({
            isAnimated: true,
            animationOptions: {
                duration: 500,
                easing: 'linear',
                queue: false
            },

            //Animating with CSS Transitions
            isAnimated: !Modernizr.csstransitions,
            itemSelector: '.item',
            resizable: false, // disable normal resizing
            columnWidth: function (containerWidth) {
                return containerWidth / columns;
            }
        });
});

$container.infinitescroll({
            navSelector: '#nav-posts',    // selector for the paged navigation
            nextSelector: '#nav-posts .prev a',  // selector for the NEXT link (to page 2)
            itemSelector: '.item',     // selector for all items you'll retrieve
            loading: {
                msgText: 'Loading...',
                finishedMsg: 'No more pages to load.',
                img: ''
        }
    },

    // trigger Masonry as a callback
    function (newElements) {
        // hide new items while they are loading
        var $newElems = jQuery(newElements).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function () {
            // show elems now they're ready
            $newElems.animate({ opacity: 1 });
            $container.masonry('appended', $newElems, true);
        });
    }

Answer 1

您引用的网站中似乎没有包含“masonry_responsive_js”。

但我注意到网站的 main.js 文件中设置的规则与您上面评论中粘贴的脚本略有不同...

        if (jQuery(window).width() < 767) {
            columns = 1
        } else if (jQuery(window).width() < 1008) {
            columns = 2
        } else if (jQuery(window).width() < 1600) {
            columns = 3
        } else {
            columns = 4
        }

请注意，它正在检查“1600”，而不是“1760”。 和“1008”而不是“1023”。