使用JavaScript和jQuery实现瀑布流的示例代码-js教程-PHP中文网

首页

web前端

js教程

使用JavaScript和jQuery实现瀑布流的示例代码

黄舟

Mar 20, 2017 pm 02:26 PM

本篇文章主要介绍了用JavaScript和jQuery实现瀑布流的方法，具有很好的参考价值。下面跟着小编一起来看下吧

大致介绍

在慕课网上学习了用原生js和jQuery实现瀑布流，在这里做个笔记

用Javascript实现

基本结构：

<p id="main">
 <p class="box">
  <p class="pic"><img src="images/1.jpg" alt=""></p>
 </p>
 <p class="box">
  <p class="pic"><img src="images/2.jpg" alt=""></p>
 </p>
  ...
  ...
  ...
 </p>

基本样式：

*{
 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(&#39;*&#39;);
  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 = &#39;width:&#39; + oBoxW*cols + &#39;px;margin:0 auto;&#39;;

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 + &#39;px&#39;;
   //oBox[i].style.left = oBoxW*index+&#39;px&#39;;
   oBox[i].style.left = oBox[index].offsetLeft + &#39;px&#39;;
   //更新每列的高度
   hArr[index] += oBox[i].offsetHeight;
  }
  }

//获取每列高度最小的索引值
 function getMinIndex(arr,value){
  for(var i in arr){
  if(arr[i] == value){
   return i;
  }
  }
 }

6、根据最后一张图片的位置确定是否继续加载图片（懒加载）

假设是后台给的数据

  //数据
  var dataInt = {&#39;data&#39;:[{&#39;src&#39;:&#39;1.jpg&#39;},{&#39;src&#39;:&#39;2.jpg&#39;},{&#39;src&#39;:&#39;3.jpg&#39;},{&#39;src&#39;:&#39;4.jpg&#39;}]};

当滚动条滚动时执行

  //滚动条滚动时
  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(&#39;main&#39;,&#39;box&#39;)){
  var oParent = document.getElementById(&#39;main&#39;);
  //将数据块渲染到当前页面的尾部
  for(var i=0;i<dataInt.data.length;i++){
   var oBoxs = document.createElement(&#39;p&#39;);
   oBoxs.className = &#39;box&#39;;
   oParent.appendChild(oBoxs);
   var oPic = document.createElement(&#39;p&#39;);
   oPic.className = &#39;pic&#39;;
   oBoxs.appendChild(oPic);
   var oImg = document.createElement(&#39;img&#39;);
   oImg.src = &#39;images/&#39; + dataInt.data[i].src;
   oPic.appendChild(oImg);
  }
  waterfall(&#39;main&#39;,&#39;box&#39;);
  }

用jQurey实现

用jQuery实现的思路都是一样的，就直接放代码

$(window).on(&#39;load&#39;,function(){
  waterfall();
  var dataInt={&#39;data&#39;:[{&#39;src&#39;:&#39;1.jpg&#39;},{&#39;src&#39;:&#39;2.jpg&#39;},{&#39;src&#39;:&#39;3.jpg&#39;},{&#39;src&#39;:&#39;4.jpg&#39;}]};
  $(window).on(&#39;scroll&#39;,function(){
  scrollSlide(dataInt);
  })
 });
 function waterfall(){
  var $oBox = $(&#39;#main>p&#39;);
  var oBoxW = $oBox.eq(0).outerWidth();
  var cols = Math.floor($(window).width()/oBoxW);
  $(&#39;#main&#39;).css({
  &#39;width&#39; : cols * oBoxW,
  &#39;margin&#39; : &#39;0 auto&#39;
  });
  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({
   &#39;position&#39; : &#39;absolute&#39;,
   &#39;top&#39;: minH + 15,
   &#39;left&#39; : $oBox.eq( minHIndex ).position().left
   });
   hArr[minHIndex] += $oBox.eq(index).height() + 15;
  }
  });
 }
 function checkScrollSlide(){
  var $lastBox = $(&#39;#main>p&#39;).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 = $(&#39;<p>&#39;).addClass(&#39;box&#39;).appendTo(&#39;#main&#39;);
   var $Pic = $(&#39;<p>&#39;).addClass(&#39;pic&#39;).appendTo($Box);
   $(&#39;<img>&#39;).attr(&#39;src&#39;,&#39;images/&#39; + $(value).attr(&#39;src&#39;)).appendTo($Pic);
  })
  waterfall();
  }
 }

以上是使用JavaScript和jQuery实现瀑布流的示例代码的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript的演变：当前的趋势和未来前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

神秘的JavaScript：它的作用以及为什么重要Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石，它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发，极大地提升了用户体验和跨平台开发的灵活性。