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)