如何使用JavaScript和jQuery实现瀑布流

基本样式：

*{
 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实现瀑布流”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
            
            
            
            


            文章名称：如何使用JavaScript和jQuery实现瀑布流
            


            路径分享：http://mswzjz.cn/article/pdocje.html

        

    

    


        
其他资讯

        


            


                    零基础如何入门网络安全

                


                    影视后期制作常用的工具有哪些？各个工具优势盘点

                


                    嵌入式工程师做什么的？哪些公司最需要

                


                    零基础学网络安全好学吗

                


                    物联网与区块链有关系吗？具体应用在哪些领域