jQuery砌体和媒体查询-ResponseIV

我试图在响应性设计中使用jQuery Mashine，但它不能正常工作。
有时，不显示所需的列数

示例：
窗口大小：1024像素
实际上这里应该显示3列，但只显示2列。从1038px可以看到3个柱

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

地点：

砖石结构\u响应式\u 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;
  }
}

砖石结构\u响应\u 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);
        });
    }

//在调整窗口大小时更新列宽度
变量列=1，
setColumns=函数（）{
if（jQuery（window）.width（）<767）{
列=1
}else if（jQuery（window）.width（）<1023）{
列=2
}else if（jQuery（window）.width（）<1760）{
列=3
}否则{
列=4
}
}
setColumns（）；
jQuery（窗口）。调整大小（设置列）；
//邮件容器（图像）
var$container=jQuery（“#list”）；
//检测图像何时已加载。
$container.imagesLoaded（函数（）{
//初始化砌体
$container.com({
是的，
动画选项：{
持续时间：500，
“线性”，
队列：false
},
//使用CSS变换设置动画
我说：！现代化，
itemSelector:“.item”，
可调整大小：false，//禁用正常调整大小
columnWidth:函数（containerWidth）{
返回集装箱宽度/列；
}
});
});
$container.infinites卷({
导航选择器：“#nav posts”，//分页导航的选择器
下一个选择器：“#nav posts.prev a”，//下一个链接（到第2页）的选择器
itemSelector:'.item'，//将检索的所有项目的选择器
装载：{
msgText:“正在加载…”，
FinishedMg:“没有更多页面要加载。”，
img:'
}
},
//触发器作为回调
函数（新元素）{
//在加载新项目时隐藏它们
var$newElems=jQuery（newElements）.css（{opacity:0}）；
//确保在添加到砌体布局之前加载图像
$newElems.imagesLoaded（函数（）{
//显示元素现在他们准备好了
$newElems.animate（{opacity:1}）；
$container.mashise（'added'，$newElems，true）；
});
}

您所引用的网站上似乎没有包含“砖石结构”

但是我注意到网站的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
        }

if（jQuery（window）.width（）<767）{
列=1
}else if（jQuery（window）.width（）<1008）{
列=2
}else if（jQuery（window）.width（）<1600）{
列=3
}否则{
列=4
}

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