砌體js列數在瀏覽器寬度上的變化

Question

我想問一下如何在瀏覽器窗口寬度上更改砌體中的列數。

是這樣的：

@media all and (min-device-width: 320px) and (max-device-width : 480px) { 2 columns } 
@media all and (min-device-width : 768px) and (max-device-width : 1024px) { 3 columns } 
@media all and (min-width : 1024px) { 4 columns } 

$('#content .home').masonry({ 
    //options 
    itemSelector : '.item', 
    columnWidth : function(containerWidth) { 
     return containerWidth/2; 
    }, 
    isAnimated: true 
}); 

感謝您的幫助。歡呼聲

Answer 1

嘗試這樣：

jQuery(document).ready(function($) { 
var CollManag = (function() { 
    var $ctCollContainer = $('#grid'), 
    collCnt = 1, 
    init = function() { 
     changeColCnt(); 
     initEvents(); 
     initPlugins(); 
    }, 
    changeColCnt = function() { 
     var w_w = $(window).width(); 
     if(w_w <= 480) n = 1; 
     else if(w_w <= 700) n = 2; 
     else n = 3; 
    }, 
    initEvents = function() { 
     $(window).on('smartresize.CollManag', function(event) { 
      changeColCnt(); 
     }); 
    }, 
    initPlugins = function() { 
     $ctCollContainer.imagesLoaded(function(){ 
      $ctCollContainer.masonry({ 
       itemSelector : '.box_item', 
       columnWidth : function(containerWidth) { 
        return containerWidth/n; 
       }, 
       isAnimated : true, 
       animationOptions: { 
        duration: 400 
       } 
      }); 
     }); 

    }; 
    return { init: init }; 
})(); 
CollManag.init(); 
}); 

或者

$(window).load(function() 
{ 
    var columns = 3, 
     setColumns = function() { columns = $(window).width() > 700 ? 3 : $(window).width() > 480 ? 2 : 1 }; 

    setColumns(); 
    $(window).resize(setColumns); 

    $('#grid').masonry(
    { 
     itemSelector: '.box_item', 
     gutterWidth: 0, 
     isAnimated: true, 
     columnWidth: function(containerWidth) { return containerWidth/columns; } 
    }); 
});