大致介绍

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

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

# jquery实现瀑布流  # javascript瀑布流  # jquery  # 瀑布流  # Jquery瀑布流插件使用介绍  # jQuery 瀑布流 浮动布局（一）(延迟AJAX加载图片)  # jQuery瀑布流插件Wookmark使用实例  # jQuery Masonry瀑布流插件使用详解  # jQuery 瀑布流 绝对定位布局（二）(延迟AJAX加载图片)  # jQuery实现瀑布流布局  # js实现的美女瀑布流效果代码  # javascript自适应宽度的瀑布流实现思路  # 原生JS实现响应式瀑布流布局  # 解析瀑布流布局:JS+绝对定位的实现  # 纯js实现瀑布流展现照片(自动适应窗口大小)  # 加载  # 滚动条  # 判断是否  # 在这里  # 做个  # 是一样的  # 网上  # solid  # ccc  # 有几列  # shadow  # radius  # border  # relative  # position  # padding  # left  # float  # clsname  # function 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： javascript中的数组方法有哪些_如何利用数组方法简化数据处理  Edge浏览器如何截图和滚动截图_微软Edge网页捕获功能使用教程【技巧】  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  如何获取PHP WAP自助建站系统源码？  如何快速打造个性化非模板自助建站？  详解CentOS6.5 安装 MySQL5.1.71的方法  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  Laravel用户认证怎么做_Laravel Breeze脚手架快速实现登录注册功能  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  制作旅游网站html,怎样注册旅游网站？  焦点电影公司作品,电影焦点结局是什么？  浅谈redis在项目中的应用  如何为不同团队 ID 动态生成多个独立按钮  JS去除重复并统计数量的实现方法  JavaScript模板引擎Template.js使用详解  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗？  品牌网站制作公司有哪些,买正品品牌一般去哪个网站买？  零服务器AI建站解决方案：快速部署与云端平台低成本实践  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  Laravel如何配置Horizon来管理队列？（安装和使用）  大同网页,大同瑞慈医院官网？  Laravel Asset编译怎么配置_Laravel Vite前端构建工具使用  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  如何用已有域名快速搭建网站？  简单实现jsp分页  千库网官网入口推荐 千库网设计创意平台入口  使用Dockerfile构建java web环境  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  网站制作大概要多少钱一个,做一个平台网站大概多少钱？  Laravel如何处理文件上传_Laravel Storage门面实现文件存储与管理  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  如何在云主机上快速搭建多站点网站？  原生JS实现图片轮播切换效果  java ZXing生成二维码及条码实例分享  如何用AI帮你把自己的生活经历写成一个有趣的故事？  Laravel如何自定义错误页面（404, 500）？（代码示例）  微信小程序制作网站有哪些,微信小程序需要做网站吗？  使用spring连接及操作mongodb3.0实例  Laravel如何实现API资源集合？（Resource Collection教程）  高端企业智能建站程序：SEO优化与响应式模板定制开发  Java类加载基本过程详细介绍  Laravel怎么使用Markdown渲染文档_Laravel将Markdown内容转HTML页面展示【实战】  如何挑选高效建站主机与优质域名？  英语简历制作免费网站推荐,如何将简历翻译成英文？  制作网站软件推荐手机版,如何制作属于自己的手机网站app应用？  如何在建站主机中优化服务器配置？  使用豆包 AI 辅助进行简单网页 HTML 结构设计  米侠浏览器网页背景异常怎么办 米侠显示修复  Laravel怎么使用artisan命令缓存配置和视图