用JavaScript和jQuery实现瀑布流

大致介绍在慕课网上学习了用原生js和jQuery实现瀑布流，在这里做个笔记用JavaScript实现基本

大致介绍

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

用JavaScript实现

基本结构：

<div id="main">
 <div class="box">
 <div class="pic"><img src="images/1.jpg" alt=""></div>
 </div>
 <div class="box">
 <div class="pic"><img src="images/2.jpg" alt=""></div>
 </div>
 ...
 ...
 ...
 </div>

基本样式：

*{
 margin: 0px;
 padding: 0px;
 }
 #main{
 position: relative;
 }
 .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

 //将main下的所有class为box的元素取出来
 var oParent = document.getElementById(parent);
 var oBox = getByClass(oParent,box);

// 根据class获取元素
 function getByClass(parent,clsname){
 var arr = [];//用来存储获取到的所有class为box的元素
 var oElement = parent.getElementsByTagName('*');
 for(var i=0;i<oElement.length;i++){
 if(oElement[i].className == clsname){
 arr.push(oElement[i]);
 }
 }
 return arr;
 }

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步骤，直至图片加载完

//存储每列的高度
 var hArr = [];
 for(var i=0;i<oBox.length;i++){
 if(i<cols){
 //第一行图片的高度
 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、根据最后一张图片的位置确定是否继续加载图片（懒加载）

假设是后台给的数据

 //数据
 var dataInt = {'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};　　

当滚动条滚动时执行

 //滚动条滚动时
 window.onscroll = function(){
 scrollSlide(dataInt);
 }　　

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

//判断是否具有了滚条加载数据块的条件
 function checkScrollSlide(parent,clsname){
 var oParent = document.getElementById(parent);
 var oBox = 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;
 }

加载图片

//滚动条滚动时执行
 function scrollSlide(dataInt){
 ////判断是否具有了滚条加载数据块的条件
 if(checkScrollSlide('main','box')){
 var oParent = document.getElementById('main');
 //将数据块渲染到当前页面的尾部
 for(var i=0;i<dataInt.data.length;i++){
 var oBoxs = 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实现的思路都是一样的，就直接放代码

$(window).on('load',function(){
 waterfall();
 var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
 $(window).on('scroll',function(){
 scrollSlide(dataInt);
 })
 });
 function waterfall(){
 var $oBox = $('#main>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(index<cols){
 hArr.push(oBoxH);
 }else{
 var minH = Math.min.apply(null,hArr);
 var minHIndex = $.inArray(minH,hArr);
 $(value).css({
 'position' : 'absolute',
 'top': minH + 15,
 'left' : $oBox.eq( minHIndex ).position().left
 });
 hArr[minHIndex] += $oBox.eq(index).height() + 15;
 }
 });
 }
 function checkScrollSlide(){
 var $lastBox = $('#main>div').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 = $('<div>').addClass('box').appendTo('#main');
 var $Pic = $('<div>').addClass('pic').appendTo($Box);
 $('<img>').attr('src','images/' + $(value).attr('src')).appendTo($Pic);
 })
 waterfall();
 }
 }

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