用JavaScript和jQuery实现瀑布流

前端之家收集整理的这篇文章主要介绍了用JavaScript和jQuery实现瀑布流前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

大致介绍

在慕课网上学习了用原生js和jQuery实现瀑布流,在这里做个笔记

用JavaScript实现

基本结构:

Box">
Box">
... ... ...

Box{ padding: 15px 0 0 15px; float: left; } .pic{ padding: 10px; border: 1px solid #ccc; border-radius: 5px; Box-shadow: 0 0 5px #ccc; }

思路:

1、获取#main下的所有.Box

2、计算页面图片有几列,并设置页面的宽度

3、找出这几列中高度最小的列

4、从第二行开始,设置图片为相对定位,把一张图片放到高度最小列的下面

5、更新列的高度,重复3、4、5步骤,直至图片加载完

6、根据最后一张图片的位置确定是否继续加载图片(懒加载)

实现:

1、获取#main下的所有.Box

Box的元素取出来 var oParent = document.getElementById(parent); var oBox = getByClass(oParent,Box);
获取元素 function getByClass(parent,clsname){ var arr = [];//用来存储获取到的所有class为Box的元素 var oElement = parent.getElementsByTagName('*'); for(var i=0;i

2、计算页面图片有几列,并设置页面的宽度

页面显示的列数(页面宽/Box的宽) var oBoxW = oBox[0].offsetWidth; var cols = Math.floor(document.documentElement.clientWidth/oBoxW); //设置main的宽 oParent.style.cssText = 'width:' + oBoxW*cols + 'px;margin:0 auto;';

3、找出这几列中高度最小的列

4、从第二行开始,设置图片为相对定位,把一张图片放到高度最小列的下面

5、更新列的高度,重复3、4、5步骤,直至图片加载完

Box.length;i++){ if(i图片的高度 hArr.push(oBox[i].offsetHeight); }else{ var minH = Math.min.apply(null,hArr); var index = getMinIndex(hArr,minH); oBox[i].style.position = "absolute"; oBox[i].style.top = minH + 'px'; //oBox[i].style.left = oBoxW*index+'px'; oBox[i].style.left = oBox[index].offsetLeft + 'px'; //更新每列的高度 hArr[index] += oBox[i].offsetHeight; } }
获取每列高度最小的索引值 function getMinIndex(arr,value){ for(var i in arr){ if(arr[i] == value){ return i; } } }

6、根据最后一张图片的位置确定是否继续加载图片(懒加载)

假设是后台给的数据

当滚动条滚动时执行

根据最后一张图片的位置,来判断是否进行加载

Box = getByClass(oParent,clsname); var lastBoxH = oBox[oBox.length-1].offsetTop + Math.floor(oBox[oBox.length-1].offsetHeight/2); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var height = document.documentElement.clientHeight || document.body.clientHeight; return (lastBoxH < scrollTop + height)? true:false; }

加载图片

Box')){ var oParent = document.getElementById('main'); //将数据块渲染到当前页面的尾部 for(var i=0;iBoxs = document.createElement('div'); oBoxs.className = 'Box'; oParent.appendChild(oBoxs); var oPic = document.createElement('div'); oPic.className = 'pic'; oBoxs.appendChild(oPic); var oImg = document.createElement('img'); oImg.src = 'images/' + dataInt.data[i].src; oPic.appendChild(oImg); } waterfall('main','Box'); }

用jQurey实现

用jQuery实现的思路都是一样的,就直接放代码

div'); var oBoxW = $oBox.eq(0).outerWidth(); var cols = Math.floor($(window).width()/oBoxW); $('#main').css({ 'width' : cols * oBoxW,'margin' : '0 auto' }); var hArr = []; $oBox.each(function(index,value){ var oBoxH = $oBox.eq(index).height(); if(indexdiv').last(); var lastBoxH = $lastBox.offset().top + Math.floor($lastBox.height()/2); var scrollTop = $(window).scrollTop(); var clientH = $(window).height(); return (lastBoxH < scrollTop + clientH) ? true : false; } function scrollSlide(dataInt){ if(checkScrollSlide()){ $.each(dataInt.data,function(index,value){ var $Box = $('
').addClass('Box').appendTo('#main'); var $Pic = $('
').addClass('pic').appendTo($Box); $('').attr('src','images/' + $(value).attr('src')).appendTo($Pic); }) waterfall(); } }

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程之家!

原文链接:https://www.f2er.com/jquery/40614.html

猜你在找的jQuery相关文章