首页 > 代码库 > 瀑布流

瀑布流

jquery.jslightbox.min.cssmasonry.pkgd.min.jsimagesloaded.pkgd.min.jslightbox.min.js<div class="data_list">    <ul id="masonry">            </ul>    <div class="ajax-loader" data-flag = "yes">        <img src="http://www.mamicode.com/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("已加载全部");        }    }})

 

瀑布流