[JQ教程]动态更新的内容如何以瀑布流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>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>masonry瀑布流布局jquery插接件</title>
<script src="http://www.coding123.net/js/jquery.js" type="text/javascript"></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>

元素模板

[JQ教程]动态更新的内容如何以瀑布流masonry重新布局