首页 > 代码库 > 瀑布流
瀑布流
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("已加载全部"); } }})
瀑布流
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。