0

就像我认为我在让 Masonry 更具响应性方面取得了进展......

我用这段代码给 Masonry 打电话：

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: 250
                }
            });
        });

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

});

它根据视口宽度更改砌体柱。

我已经剥离了我的 HTML/CSS，所以我只有一些图像包装在一个 div (.box_item) 中。这些 div 具有基于百分比的宽度（我知道使用 % 的浏览器舍入问题）。

一切运行良好，当我减小浏览器宽度时，我的网格相应地从 3、2、1 列更改。我对容器之间的间距特别满意（一切看起来都一样）。

如果我将浏览器的大小调整到 700 像素，我们的所有间距都是相等的（由于浏览器对我的尺寸进行了四舍五入，在最右侧稍大一些）。如果我在这个视口刷新浏览器，排水沟的宽度会稍微改变。如果我将浏览器的大小调整 1 像素，我的网格间距会重置。

访问某些视口的人比我为他们调整浏览器的大小更重要 :) 知道可能导致此问题的原因是什么吗？99% 确定它与 CSS 无关，因为我已经将所有内容都剥离了。

更新：已将原始脚本替换为以下脚本（问题仍然存在）：

// load masonry / change layout based on view port
$(document).ready(function(){
    var $container = $('#grid');
    var gutter = 20;
    var min_width = 230;
    $container.imagesLoaded( function(){
        $container.masonry({
            itemSelector : '.box_item',
            gutterWidth: gutter,
            isAnimated: true,
              columnWidth: function( containerWidth ) {
                var box_width = (((containerWidth - 2*gutter)/3) | 0) ;

                if (box_width < min_width) {
                    box_width = (((containerWidth - gutter)/2) | 0);
                }

                if (box_width < min_width) {
                    box_width = containerWidth;
                }

                $('.box_item').width(box_width);

                return box_width;
              }
        });
    });
});
4

0 回答 0