用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 DOM学习第八章 表单错误提示
Feb 19 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
js获取location.href的参数实例代码
Aug 02 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
采用call方式实现js继承
May 20 Javascript
DEDECMS如何为文章添加HOT NEW标志图片
Aug 14 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 Javascript
微信小程序APP页面的之间的相互传递参数以及自定义组件
Apr 19 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递归删除目录与文件的方法
2015/01/30 PHP
PHP-FPM 的管理和配置详解
2019/02/17 PHP
javascript循环变量注册dom事件 之强大的闭包
2010/09/08 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
JS实现跟随鼠标闪烁转动色块的方法
2015/02/26 Javascript
jQuery中$.extend()用法实例
2015/06/24 Javascript
JS 日期与时间戮相互转化的简单实例
2016/06/22 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
bootstrap suggest搜索建议插件使用详解
2017/03/25 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
2021/01/07 Vue.js
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python图像常规操作
2017/11/11 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
基于Python实现定时自动给微信好友发送天气预报
2018/10/25 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
银行职员思想汇报
2013/12/31 职场文书
公司中层干部的自我评价分享
2014/03/01 职场文书
写得不错的求职信范文
2014/07/11 职场文书
个人学习群众路线心得体会
2014/11/05 职场文书
2014年环保工作总结
2014/11/26 职场文书
2016大学生就业指导课心得体会
2016/01/15 职场文书
导游词之无锡华莱坞
2019/12/02 职场文书
python基于tkinter制作m3u8视频下载工具
2021/04/24 Python
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
MyBatis配置文件解析与MyBatis实例演示
2022/04/07 Java/Android
解决ubuntu安装软件时,status-code=409报错的问题
2022/12/24 Servers