动态更新的内容如何以瀑布流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重新布局