瀑布流

Posted 2020-08-09 Loweringye

jquery.js
lightbox.min.css
masonry.pkgd.min.js
imagesloaded.pkgd.min.js
lightbox.min.js
<div class="data_list">
    <ul id="masonry">
        
    </ul>
    <div class="ajax-loader" data-flag = "yes">
        <img src="ajax-loader.gif" width="24" height="24"/>
        <span>正在为您加载更多...</span>
    </div>
</div>                
//瀑布流
var masonryNode = $(‘#masonry‘);
var flag = true;
var imagesLoading = false;
$(window).scroll(function() {
    if(($(document).height() - $(window).height() - $(document).scrollTop() < 50)) {
        var is_ajax = $(".ajax-loader").attr("data-flag");
        if(flag && !imagesLoading && is_ajax==‘yes‘) {
            flag = false;
            imagesLoading = true;
            $(".ajax-loader").show();
            $.get("/",{},function (data){
                var items = $(data).find(‘.data_list‘);
                if(items.length>0){
                    items.find("img").css(‘opacity‘, 0);
                    masonryNode.append(items);
                    items.imagesLoaded(function(){
                        imagesLoading = false;
                        items.find("img").css(‘opacity‘, 1);
                        masonryNode.masonry(‘appended‘,  items);
                        $(".ajax-loader").hide();
                        flag = true;
                    }).progress( function( instance, image ) {
                       /*  var result = image.isLoaded ? ‘loaded‘ : ‘broken‘;
                        console.log( ‘image is ‘ + result + ‘ for ‘ + image.img.src ); */
                    });
                }else{
                    $(".ajax-loader").attr("data-flag","no");
                    $(".ajax-loader").show().empty().append("已加载全部");
                }
            })                
        }else{
            //$(".ajax-loader").attr("data-flag","no");
            //$(".ajax-loader").show().empty().append("已加载全部");
        }
    }
})