jQuery 瀑布流使用ajax加载数据库图片url ，ajax每次请求到的数据不变时，瀑布流效果没问题。 但当请求到的数据变化时，瀑布流图片格式会重叠 或者相隔很远等等的格式问题，这是由于图片加载是有网络延时的, 所以当添加第一个图片后, 图片还没来得及加载, 就进入第二个图片的循环了, 此时的高度计算很可能是没有算上图片的真实高度的, 等到图片都加载完成后自然会重叠；
解决方法如下：
1、使用imagesLoaded和onload，等瀑布流的图片加载完才执行瀑布流
2、提前预留好图片高度(不推荐)
$("元素").click(function(){ $.ajax({ type:'POST', url:"路径", dataType:"json", success:function (data) { var html = ""; var main=$('#main').html(); for(var i=0; i<data.length; i++) { html+='<img src="'+data[i].thumb_image+'"/>'; //方法一， var img = new Image(); img.onload = function () { $("#main").html(main+html); waterfall();//调用瀑布流的函数 } img.src = data[i].thumb_image; } $("#main").html(main+html); // 方法二，推荐（注：#main是包含瀑布流的div） imagesLoaded(document.querySelector('#main'), function( instance ) { waterfall();//执行瀑布流函数 }); } }) })
imagesLoaded和onload，都是等瀑布流的图片加载完才执行瀑布流 ，但我推荐使用imagesLoaded(https://github.com/desandro/imagesloaded)