用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 相关文章推荐
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
js实现获取焦点后光标在字符串后
Sep 17 Javascript
node.js中的console.trace方法使用说明
Dec 09 Javascript
ajax在兼容模式下失效的快速解决方法
Mar 22 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 Javascript
vant picker+popup 自定义三级联动案例
Nov 04 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
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
用正则获取指定路径文件的名称
2007/02/27 Javascript
延时重复执行函数 lLoopRun.js
2007/05/08 Javascript
jquery keypress,keyup,onpropertychange键盘事件
2010/06/25 Javascript
jquery ajax修改全局变量示例代码
2013/11/08 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
jQuery中的一些常见方法小结(推荐)
2016/06/13 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
2016/12/01 Javascript
浅谈JavaScript的自动垃圾收集机制
2016/12/15 Javascript
webuploader模态框ueditor显示问题解决方法
2016/12/27 Javascript
angularjs封装$http为factory的方法
2017/05/18 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
python实现bitmap数据结构详解
2014/02/17 Python
Zookeeper接口kazoo实例解析
2018/01/22 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
最新2019Pycharm安装教程 亲测
2020/02/28 Python
Python实现CAN报文转换工具教程
2020/05/05 Python
golang/python实现归并排序实例代码
2020/08/30 Python
NFL Game Pass欧洲:在线观看NFL比赛直播和点播,以高清质量播放
2018/08/30 全球购物
大学生新闻专业个人自我评价
2013/11/12 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
初婚初育证明范本
2014/11/24 职场文书
2014年信用社工作总结
2014/11/25 职场文书
高三教师工作总结2015
2015/07/21 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题