用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弹出填写提示效果代码
Apr 16 Javascript
JS操作JSON要领详细总结
Aug 25 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
jQuery简单tab切换效果实现方法
Apr 08 Javascript
jquery序列化方法实例分析
Jun 10 Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 Javascript
BootStrap selectpicker
Jun 20 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
angularjs1.5 组件内用函数向外传值的实例
Sep 30 Javascript
微信小程序实现图片上传
May 23 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
Sep 17 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数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
php获取从百度搜索进入网站的关键词的详细代码
2014/01/08 PHP
php中静态类与静态变量用法的区别分析
2015/01/15 PHP
php使用unset()删除数组中某个单元(键)的方法
2015/02/17 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
PHP中的print_r 与 var_dump 输出数组
2016/06/13 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
javascript常见用法总结
2014/05/22 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
将angular-ui的分页组件封装成指令的方法详解
2017/05/10 Javascript
你应该知道的几类npm依赖包管理详解
2017/10/06 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
js通过循环多张图片实现动画效果
2019/12/19 Javascript
js实现抽奖的两种方法
2020/03/19 Javascript
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python对列表排序的方法实例分析
2015/05/16 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
python数据结构之链表的实例讲解
2017/07/25 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
Python对切片命名的实现方法
2018/10/16 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
CSS3实现3D翻书效果
2016/06/20 HTML / CSS
应付会计岗位职责
2013/12/12 职场文书
员工拾金不昧表扬信
2014/01/09 职场文书
计划生育责任书
2015/05/09 职场文书
运动会100米加油稿
2015/07/21 职场文书
企业团队精神心得体会
2016/01/19 职场文书
为什么代码规范要求SQL语句不要过多的join
2021/06/23 MySQL
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS