我正在开发响应式布局,我也在使用JQuery Masonry。

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

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 init脚本是这样的..

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

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

===============>>#1 票数:11 已采纳

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

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

Yuo可以在这里阅读更多关于砌体方法的内容: http//masonry.desandro.com/methods.html

===============>>#2 票数:1

使用流体布局时,bindResize可用于调整容器中的所有项目( bindResize位于https://github.com/desandro/masonry/blob/master/dist/masonry.pkgd.js

$container.masonry({
    itemSelector: '.container'
});

$(window).resize(function () {
    $container.masonry('bindResize')
});

  ask by MANnDAaR translate from so

未解决问题?本站智能推荐:

2回复

当窗口调整大小时,jQuery砌体布局正在破碎 - 流畅的无缝照片网格

我发布了一个解释我的问题的视频 。 抱歉帧速率慢。 当我缩小窗口太快时,Masonry jQuery插件似乎太慢而无法跟上,因此当浏览器调整太快时会破坏布局。 有些项目位于页脚下方,看起来显然是错误的。 当我重新加载页面时,如视频中所示,布局恢复正常。 我认为这是一个问题是
2回复

在砌体调整大小之前如何执行代码

我正在使用砌体进行布局。 当浏览器的窗口调整大小时,我想在Masonry重做布局之前执行一些计算。 到现在为止,我已经能够通过修改jquery.masonry.js文件并向选项添加回调函数来做到这一点。 但是我宁愿不修改砌体代码就这样做。 添加的选项如下(砌体初始化):
1回复

使用jQuery Quicksearch时是否可以重新定位jQuery Masonry-“砖块”?

我以jQuery Masonry样式( http://masonry.desandro.com/ )和jQuery Quicksearch( https://github.com/DeuxHuitHuit/quicksearch )来显示结果。 当我进行搜索时,不匹配的“砖”将被删除/隐藏-
1回复

jQuery:在窗口调整大小上两次更新砌体列宽

我正在尝试使用jQuery石工插件在列宽之间切换,具体取决于浏览器窗口的大小。 因此,如果浏览器窗口小于1700px,您将从4列切换到3列,那么当浏览器窗口小于1200px时,您将从3列切换到2。 但是我在实现此功能时遇到问题,我可以使一个功能正常工作,但是事实证明很难两次切换列宽。
1回复

jQuery石工。 调整大小时更新columnWidth

我试图弄清楚调整浏览器窗口大小时如何更改流体砌体布局的columnWidth。 因此,当浏览器宽度小于1300px时,columnWidth从4切换为3。 这是我的jQuery: 这是可能吗?
2回复

在调整大小时更改砌体的columnWidth选项

我正在使用此插件: http : //masonry.desandro.com/ 我目前正在初始化960px布局的插件,我的代码是: 当屏幕宽度或浏览器窗口宽度大于1225px时,我想将columnWidth数从113更改为146。 我该怎么做呢?
1回复

砌体:找到新的屏幕宽度或窗口宽度后,如何更改columnWidth选项?

当浏览器窗口或屏幕宽度低于某个数字时,我基本上是在尝试更改砌体脚本的布局。 我希望它能够(实时)响应您更改浏览器的宽度,但此刻此刻会中断。 另外,由于某种原因,只有先加载的脚本才能工作。 我已经测试了Masonry的isResizable:true选项,但没有得到我想要的效果。 有人可以
1回复

jQuery Masonry在不同的断点处更新columnwidth

我正在使用jQuery Masonry,并且尝试根据窗口宽度来更新列宽。 我使用简单的布尔值就没有任何问题: columnWidth: $(document).width() > 1280 ? 380 : 260 我已经尝试了几种其他方式来编写else if语句类型,以便可以
3回复

jQuery方向与$(window).resize ooops

我正在努力实现以下目标:我正在开发的网站在横向模式下工作得更好。 我希望当设备处于开启状态时,会显示一条消息,而当处于启用状态时,则不显示该消息。 我在ready()函数内编写了以下代码: 但是当页面加载(或我刷新它)时,它总是显示消息(因为它应该只在纵向模式下)。 如果我然后
1回复

在窗口调整大小时更新jQuery插件设置

我正在编写一个具有默认值的jquery插件,当然,人们可以为这些变量定义自己的值。 这是我当前的默认值。 我遇到的麻烦是我希望这些值可以在窗口调整大小时更新,无论是默认值还是使用插件的人员定义的值。 您将如何做,使其发生在插件中? 在此先感谢您的任何帮助。