怎么使用JavaScript和jQuery实现瀑布流

本篇内容介绍了"怎么使用JavaScript和jQuery实现瀑布流"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

用JavaScript实现

基本结构：

 
  
 
 
  
 
  ...  ...  ... 

基本样式：

*{ 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
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
//获取每列高度最小的索引值 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
用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(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();  } }
"怎么使用JavaScript和jQuery实现瀑布流"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！