网上找了个瀑布流的图片排列插件。从数据库读取图片路径后显示时出现了位置重叠问题。
1 $.ajax({ 2 type: "POST", 3 url: "index.aspx", 4 data: { ‘action‘: ‘SelectImage‘}, 5 dataType: "json", 6 success: function (result) { 7 var imgpanel = $("#imgitem"); 8 var index = 1; 9 for (var i in result) 10 { 11 imgpanel.append("<div class =‘item‘><img src =‘" + result[i] + "‘/></div>"); 12 } 13 PBL(‘main‘, ‘item‘);//瀑布流排序 14 }, error: function (x, e) { 15 alert("error:"+ x.responseText); 16 } 17 });
在执行瀑布流排序的时候一些图片还未加载完成，导致图片重叠在了一起。
通过调用img中的onload方法判断图片是否加载完成，加载完成再进行瀑布流排列
修改如下：
1 $.ajax({ 2 type: "POST", 3 url: "index.aspx", 4 data: { ‘action‘: ‘SelectImage‘}, 5 dataType: "json", 6 success: function (result) { 7 var imgpanel = $("#imgitem"); 8 var index = 1; 9 for (var i in result) 10 { 11 var img = new Image(); 12 img.src = result[i]; 13 imgpanel.append("<div class =‘item‘><img src =‘" + result[i] + "‘/></div>"); 14 img.onload = function () { 15 if (index == result.length) { 16 PBL(‘main‘, ‘item‘);//瀑布流排序 17 } 18 index++; 19 } 20 } 21 }, error: function (x, e) { 22 alert("error:"+ x.responseText); 23 } 24 });
原文：http://www.cnblogs.com/bakuhert/p/5902091.html