masonry ajax 没用,动态更新的内容如何以瀑布流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代码运行查看效果

masonry瀑布流布局jquery插接件

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('

test' + i + '');

// $('#test').masonry('appended', $('#test li[class="box"]'));

$('#test').masonry('reload');

}

function doMasonry() {

}

window.οnlοad=function () {

$('#test').masonry({

itemSelector: '.box'

});

};

ul{list-style:none;}

.box{width:150px;float:left;border:solid 1px black;margin:0px 5px 5px 5px;}

for (; i < j; i++) document.write('

test'+i+'');

加支付宝好友偷能量挖...

2012-11-16Web开发网