ajax加载引起瀑布流布局堆叠

　　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)