jQuery砌体！在窗口调整大小时更新columnWidth [英] JQuery Masonry ! Update columnWidth On Window Resize

问题描述

我也在使用JQuery Masonry进行响应式布局工作.

I'm working working on Responsive Layout where I'm using JQuery Masonry as well.

我正在使用以下脚本来获取当前列宽.

I'm using following script to get current column width.

var curWidth; 
var detector;

detector = $('.magic-column');
curWidth = detector.outerWidth(true);

$(window).resize(function(){
    if(detector.outerWidth(true)!=curWidth){
        curWidth = detector.outerWidth(true);
    }
});

我的JQuery Masonry初始化脚本是这样的.

My JQuery Masonry init script is something like this..

$(window).load(function(){
     $(function (){
            $wall.masonry({
                    singleMode: true, 
                    columnWidth: curWidth, // This needs to be update on window load & resize both //
            });
     });
});

我的第一个脚本正确获取宽度，但是砌筑中宽度没有更新... 如何同时实现加载和调整大小功能，以便在调整窗口大小时也可以为砌体更新我的curWidth

My 1st script is fetching width correctly, but in masonry that width isn't updating... How can I implement both load & resize function so that my curWidth will be updated for Masonry as well on window resize

推荐答案

调整大小后，您需要设置砌体的columnWidth:

You need to set the columnWidth of the masonry after resize:

$(window).resize(function(){
    if(detector.outerWidth(true)!=curWidth){
        curWidth = detector.outerWidth(true);
        $wall.masonry( 'option', { columnWidth: curWidth });
    }
});

您可以在此处阅读有关砌筑方法的更多信息: http://masonry.desandro.com/methods .html

Yuo can read more about the masonry methods here: http://masonry.desandro.com/methods.html

这篇关于jQuery砌体！在窗口调整大小时更新columnWidth的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！