首页 > 代码库 > 风行一时瀑布流网页布局，实现无限加载（jquery）
风行一时瀑布流网页布局，实现无限加载（jquery）
今天跟大家分享一个瀑布流网页布局,先跟大家分析下实现的思路吧
主要思路：一、根据屏幕宽度和单个浮动层的宽度来确定浮动层列数
var $boxs = $("#main>div") var boxw = $boxs.eq(0).outerWidth(); var clos = Math.floor($(window).width()/boxw); $("#main").width(boxw*clos).css(‘margin‘,‘0 auto‘);
二、用绝对定位来确定浮动层的位置，在这里我的浮动层里放一个图片来展示效果
var hArr=[]; $boxs.each(function(index, element) { var h=$boxs.eq(index).outerHeight(); if(index<clos){ hArr[index]=h; } else{ var minH=Math.min.apply(null,hArr); var minHindex=$.inArray(minH,hArr); $(element).css({ ‘position‘:‘absolute‘, ‘top‘:minH+‘px‘, ‘left‘:minHindex*boxw+‘px‘ }) hArr[minHindex]+=$boxs.eq(index).outerHeight(); }
三、根据屏幕显示高度+滚动条高度和最后一个浮动层的top值来确定执行滚动事件
$(window).scroll(function(){ if(checkscroll){ for(var i=1;i<8;i++){ var obox=$("<div>").addClass("box").appendTo($("#main")); var opic=$("<div>").addClass("pic").appendTo($(obox)); $("<img>").attr(‘src‘,‘images/‘+ i +".jpg").appendTo($(opic)); } waterfall(); } }) function checkscroll(){ var lasttop=$("#main>div").last().offset().top+=Math.floor($("#main>div").last().outerHeight()/2); var scrolltop= $(window).scrollTop(); var documeth= $(window).height(); return(lasttop>scrolltop+documeth)?true:false; }
例子请点击这里 例子（多刷新下页面看完整效果）
风行一时瀑布流网页布局，实现无限加载（jquery）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。