用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 相关文章推荐
javascript设计模式 接口介绍
Jul 24 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
Javascript实现多彩雪花从天降散落效果的方法
Feb 02 Javascript
jquery简单的弹出层浮动层代码
Apr 27 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 Javascript
JS实现数组按升序及降序排列的方法
Apr 26 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 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
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
对xmlHttp对象的理解
2011/01/17 Javascript
jQuery获取文本节点之 text()/val()/html() 方法区别
2011/03/01 Javascript
javascript禁制后退键(Backspace)实例代码
2013/11/15 Javascript
用js来刷新当前页面保留参数的具体实现
2013/12/23 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
javascript跨域原因以及解决方案分享
2015/04/08 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
python getopt 参数处理小示例
2009/06/09 Python
写了个监控nginx进程的Python脚本
2012/05/10 Python
python判断图片宽度和高度后删除图片的方法
2015/05/22 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
Python网络编程详解
2017/10/31 Python
使用python爬虫获取黄金价格的核心代码
2018/06/13 Python
基于python实现学生管理系统
2018/10/17 Python
Python之pymysql的使用小结
2019/07/01 Python
Python同时处理多个异常的方法
2020/07/28 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
法国亚马逊官方网站:Amazon.fr
2020/12/19 全球购物
公积金单位接收函
2014/01/11 职场文书
单位实习证明怎么写
2014/01/17 职场文书
情人节寄语大全
2014/04/11 职场文书
软件项目开发计划书
2014/05/01 职场文书
赞美老师的演讲稿
2014/05/22 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
毕业实习感受与体会
2015/05/26 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
人为什么会“幸灾乐祸”?
2019/08/06 职场文书
有关信念的名言语录集锦
2019/12/06 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
【DOTA2】总决赛血虐~ XTREME GAMING vs MAGMA - OGA DOTA PIT 2022 CN
2022/04/02 DOTA