用JavaScript和jQuery实现瀑布流


Posted in Javascript onMarch 19, 2017

大致介绍

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS与框架页的操作代码
Jan 17 Javascript
jQuery 添加/移除CSS类实现代码
Feb 11 Javascript
jQuery Ajax提交表单查询获得数据实例代码
Sep 19 Javascript
JS上传前预览图片实例
Mar 25 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
详解Vue底部导航栏组件
May 02 Javascript
js/jQuery实现全选效果
Jun 17 jQuery
Vue vm.$attrs使用场景详解
Mar 08 Javascript
JavaScript实现通讯录功能
Dec 27 Javascript
JSONP基础知识详解
Mar 19 #Javascript
jQuery中table数据的值拷贝和拆分
Mar 19 #Javascript
js实现旋转木马效果
Mar 17 #Javascript
jQuery实现验证码功能
Mar 17 #Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 #Javascript
node操作mysql数据库实例详解
Mar 17 #Javascript
vue.js从安装到搭建过程详解
Mar 17 #Javascript
You might like
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
JS打印gridview实现原理及代码
2013/02/05 Javascript
javascript中call,apply,bind的用法对比分析
2015/02/12 Javascript
超级简单实现JavaScript MVC 样式框架
2015/03/24 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
JS提示:Uncaught SyntaxError:Unexpected token ) 错误的解决方法
2016/08/19 Javascript
javascript实现简单的ajax封装示例
2016/12/28 Javascript
vue2.0 axios跨域并渲染的问题解决方法
2018/03/08 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
JavaScript实现表单验证功能
2020/12/09 Javascript
Python内置的字符串处理函数整理
2013/01/29 Python
使用Python的内建模块collections的教程
2015/04/28 Python
python使用正则表达式提取网页URL的方法
2015/05/26 Python
Linux下python与C++使用dlib实现人脸检测
2018/06/29 Python
Python 删除连续出现的指定字符的实例
2018/06/29 Python
对Pandas DataFrame缺失值的查找与填充示例讲解
2018/11/06 Python
python字典的setdefault的巧妙用法
2019/08/07 Python
Python单例模式的四种创建方式实例解析
2020/03/04 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
力学专业毕业生自荐信
2013/11/17 职场文书
创业大赛策划书
2014/03/01 职场文书
cf搞笑广告词
2014/03/14 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
预防传染病方案
2014/06/14 职场文书
青年文明号汇报材料
2014/12/23 职场文书
数学教师个人工作总结
2015/02/06 职场文书
培根随笔读书笔记
2015/07/01 职场文书
大学生村官工作心得体会
2016/01/23 职场文书