jQuery砌体和媒体查询 - Responsiviv

Question

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

例如：
视窗尺寸：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'。