动态更新的内容如何以瀑布流masonry重新布局

  页面第一次加载完毕后执行了masonry绘制瀑布流布局后,后续使用javascript或者ajax更新的节点内容要以masonry瀑布流布局添加到容器里面,可以使用2种方法使新增加的内容以瀑布流的形式呈现

1)对总容器调用masonry的reload方法将会重绘容器节点内的所有内容
2)对新添加的节点执行masonry的appended方法,对新添加的节点计算新新节点的位置后以瀑布流masonry形式呈现

优缺点
1)调用masonry的reload方法效率个人猜测应该会比appended方法差,因为要重新计算所有节点的位置
2)masonry的appended方法效率比较好,只对新增加点计算位置,但是选择器要注意选择到新的节点,已经布局过的不要一起选择执行appended方法,要不位置会错乱。
  选择新节点的小技巧:设置了masonry的itemSelector后,masonry插件会已经布局过的节点class增加masonry-brick样式,所以只需要将选择器class="设置的itemSelector"就行了,就不会选择已经执行masonry布局的节点

masonry的reload方法

//....对容器的更新代码
$('容器的选择器').masonry('reload');


masonry的appended方法

//....对容器的更新代码
$('容器的选择器').masonry('appended',$('新节点选择器'));


综合示例,如果无法运行请自行保存为html代码运行查看效果

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>masonry瀑布流布局jquery插接件</title>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<script src="http://masonry.desandro.com/jquery.masonry.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function rnd(min, max) {
        var tmp = min;
        if (max < min) { min = max; max = tmp; }
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
    var i = 0,j=5;
    function Add() {
        j += i;
        for (; i < j; i++)
            $('#test').prepend('<li class="box" style="height:' + rnd(100, 250) + 'px">test' + i + '</li>');
        // $('#test').masonry('appended', $('#test li[class="box"]'));
        $('#test').masonry('reload');
    }
    function doMasonry() {
       
    }
  window.onload=function () {
        $('#test').masonry({
            itemSelector: '.box'
        });
    };
</script>
<style type="text/css">
    ul{list-style:none;}
    .box{width:150px;float:left;border:solid 1px black;margin:0px 5px 5px 5px;}</style>
</head><body>
<input type="button" value="添加项目" onclick="Add()" />
<ul id="test">
<script type="text/javascript">
    for (; i < j; i++) document.write('<li class="box" style="height:'+rnd(100,250)+'px">test'+i+'</li>');
</script>
</ul></body></html>

 


原创文章,转载请注明出处:动态更新的内容如何以瀑布流masonry重新布局

评论(0)Web开发网
阅读(2822)喜欢(0)JavaScript/Ajax开发技巧