当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 用JavaScript和jQuery实现瀑布流

用JavaScript和jQuery实现瀑布流

2019年03月20日  | 移动技术网IT编程  | 我要评论

大致介绍

在慕课网上学习了用原生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();
  }
 }

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网