分别使用JS和JQuery实现瀑布流以及追加效果

最新推荐文章于 2023-12-24 22:42:21 发布

原创最新推荐文章于 2023-12-24 22:42:21 发布 · 323 阅读

0 ·

CC 4.0 BY-SA版权

前端实战小案例专栏收录该内容

21 篇文章

订阅专栏

该博客介绍了如何使用JavaScript和jQuery分别实现瀑布流布局，并展示了如何在滚动时追加新内容。通过比较JS和jQuery的实现方式，探讨了两种方法的异同。内容包括HTML结构、CSS样式以及JavaScript和jQuery的实现代码，同时提供了模拟数据以演示动态加载新内容的瀑布流效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在这里插入图片描述

html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>瀑布流</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <div id="wrap">
      <div>
        <img src="images/1.png">
        <a href="#">第一怪 竹筒当烟袋</a>
      </div>
      <div>
        <img src="images/2.png">
        <a href="#">第二怪 草帽当锅盖</a>
      </div>
      <div>
        <img src="images/3.png">
        <a href="#">第三怪 这边下雨那边晒</a>
      </div>
      <div>
        <img src="images/4.png">
        <a href="#">第四怪 四季服装同穿戴</a>
      </div>
      <div>
        <img src="images/5.png">
        <a href="#">第五怪 火车没有汽车快</a>
      </div>
      <div>
        <img src="images/6.png">
        <a href="#">第六怪 火车不通国内通国外</a>
      </div>
      <div>
        <img src="images/7.png">
        <a href="#">第七怪 老奶爬山比猴快</a>
      </div>
      <div>
        <img src="images/8.png">
        <a href="#">第八怪 鞋子后面多一块</a>
      </div>
      <div>
        <img src="images/9.png">
        <a href="#">第九怪 脚趾四季露在外</a>
      </div>
      <div>
        <img src="images/10.png">
        <a href="#">第十怪 鸡蛋拴着卖</a>
      </div>
      <div>
        <img src="images/11.png">
        <a href="#">第十一怪 粑粑叫饵块</a>
      </div>
      <div>
        <img src="images/12.png">
        <a href="#">第十二怪 花生蚕豆数着卖</a>
      </div>
      <div>
        <img src="images/13.png">
        <a href="#">第十三怪 三个蚊子一盘菜</a>
      </div>
      <div>
        <img src="images/14.png">
        <a href="#">第十四怪 四个老鼠一麻袋</a>
      </div>
      <div>
        <img src="images/15.png">
        <a href="#">第十五怪 树上松毛扭着卖</a>
      </div>
      <div>
        <img src="images/16.png">
        <a href="#">第十六怪 姑娘叫老太</a>
      </div>
      <div>
        <img src="images/17.png">
        <a href="#">第十七怪 小和尚可以谈恋爱</a>
      </div>
      <div>
        <img src="images/18.png">
        <a href="#">第十八怪 背着娃娃谈恋爱</a>
      </div>
    </div>
  </body>
  <!-- js -->
  <!-- <script type="text/javascript" src="js/script.js"></script> -->
  <!-- jquery -->
  <script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script type="text/javascript" src="jq/jq_script.js"></script>
</html>

css/style.css

/* All Tag */

* {
    margin: 0;
    padding: 0;
    border: none;
}

body {
    background: #ddd;
}

img {
    border: none;
}

a {
    text-decoration: none;
    color: #444;
}

a:hover {
    color: #999;
}

/* Wrap */
#wrap{
  position: relative;
  width: auto;
  height: auto;
  margin: 0 auto;
}

#wrap > div{
  float: left;
  box-sizing: border-box;
  width: 280px;
  height: auto;
  margin: 10px;
  padding: 10px;
  border-radius: 5px;
  background: #fff;
}

/* 除了第一行的div，其他的hover没有效果 */
/* #wrap > div:hover{
  opacity: 0.5
} */

#wrap > div >img{
  width: 100%;
}

#wrap > div > a{
  font-size: 18px;
  display: block;
  font-weight: bold;
  line-height: 40px;
  text-align: center;
}

js实现瀑布流

js/script.js

function waterfall(wrap,boxes){
  var windowWidth=window.innerWidth
        || document.documentElement.clientWidth
        || document.body.clientWidth;

  var windowHeight=window.innerHeight
        || document.documentElement.clientHeight
        || document.body.clientHeight;

  var boxWidth = boxes[0].offsetWidth +20;
  var colsNumber = Math.floor(windowWidth / boxWidth);

  // console.log(colsNumber);
  // 设置容器的宽度
  wrap.style.width = boxWidth * colsNumber + 'px';

  // 定义一个数组并存储每一列的高度
  var everyHeight = new Array();
  for(var i=0;i<boxes.length;i++){
    if(i<colsNumber){
      everyHeight[i] = boxes[i].offsetHeight+20;
    }else{
      //找到当前数组最小的值，以及Index
      var minHeight =everyHeight[0];
      var minIndex = 0;
      for(var j=0;j<colsNumber;j++){
        if(everyHeight[j]<minHeight){
          minIndex = j;
          minHeight = everyHeight[j];
        }
      }
      //将新的Box添加到最短的那列
      var leftPosition = boxes[minIndex].offsetLeft-10;
      boxes[i].style.position = 'absolute';
      boxes[i].style.top = minHeight + 'px';
      boxes[i].style.left = leftPosition+'px';
      everyHeight[minIndex] += boxes[i].offsetHeight+20;
    }
  }
}

window.onload = function() {
    var wrap = document.getElementById('wrap');
    var boxes = wrap.getElementsByTagName('div');
    waterfall(wrap, boxes);
}

window.onresize = function(){
  var wrap = document.getElementById('wrap');
  var boxes = wrap.getElementsByTagName('div');
  waterfall(wrap, boxes);
}

jquery实现瀑布流

jq/jq_script.js

function waterfall(wrap,boxes){

  var windowWidth=$(window).width();

  var boxWidth = boxes.eq(0).outerWidth()+20;

  var colsNumber = Math.floor(windowWidth / boxWidth);

  console.log(colsNumber);
  // 设置容器的宽度

  wrap.width(boxWidth * colsNumber);

  // 定义一个数组并存储每一列的高度
  var everyHeight = new Array();
  for(var i=0;i<boxes.length;i++){
    if(i<colsNumber){
      everyHeight[i] = boxes.eq(i).outerHeight()+20;
    }else{
      //找到当前数组最小的值，以及Index
      var minHeight =everyHeight[0];
      var minIndex = 0;
      for(var j=0;j<colsNumber;j++){
        if(everyHeight[j]<minHeight){
          minIndex = j;
          minHeight = everyHeight[j];
        }
      }
      //将新的Box添加到最短的那列

      console.log(minIndex);
      boxes.eq(i).css({
        'position': 'absolute',
        'top': minHeight,
        'left': boxes.eq(minIndex).position().left-10,
        'opacity': '0'
      }).stop().animate({
        'opacity': '1'
      }, 1000);

      everyHeight[minIndex] += boxes.eq(i).outerHeight()+20;
    }
  }
}

$(document).ready(function event(){
  var wrap = $('#wrap');
  var boxes = wrap.children('div');
  //加载盒子
   waterfall(wrap, boxes);

});

js和jquery对比代码

注释的是js的实现，注释下面对应的是jquery的实现

function waterfall(wrap,boxes){
  // var windowWidth=window.innerWidth
  //       || document.documentElement.clientWidth
  //       || document.body.clientWidth;
  var windowWidth=$(window).width();

  // var boxWidth = boxes[0].offsetWidth +20;
  var boxWidth = boxes.eq(0).outerWidth()+20;
  // console.log(boxWidth);
  var colsNumber = Math.floor(windowWidth / boxWidth);

  console.log(colsNumber);
  // 设置容器的宽度
  // wrap.style.width = boxWidth * colsNumber + 'px';
  wrap.width(boxWidth * colsNumber);

  // 定义一个数组并存储每一列的高度
  var everyHeight = new Array();
  for(var i=0;i<boxes.length;i++){
    if(i<colsNumber){
      // everyHeight[i] = boxes[i].offsetHeight+20;
      everyHeight[i] = boxes.eq(i).outerHeight()+20;
    }else{
      //找到当前数组最小的值，以及Index
      var minHeight =everyHeight[0];
      var minIndex = 0;
      for(var j=0;j<colsNumber;j++){
        if(everyHeight[j]<minHeight){
          minIndex = j;
          minHeight = everyHeight[j];
        }
      }
      //将新的Box添加到最短的那列
      // var leftPosition = boxes[minIndex].offsetLeft-10;
      // boxes[i].style.position = 'absolute';
      // boxes[i].style.top = minHeight + 'px';
      // boxes[i].style.left = leftPosition+'px';
      console.log(minIndex);
      boxes.eq(i).css({
        'position': 'absolute',
        'top': minHeight,
        'left': boxes.eq(minIndex).position().left-10,
        'opacity': '0'
      }).stop().animate({
        'opacity': '1'
      }, 1000);

      // everyHeight[minIndex] += boxes[i].offsetHeight+20;
      everyHeight[minIndex] += boxes.eq(i).outerHeight()+20;
    }
  }
}
/*
window.onload = function() {
    var wrap = document.getElementById('wrap');
    var boxes = wrap.getElementsByTagName('div');
    waterfall(wrap, boxes);
}
*/
$(document).ready(function event(){
  var wrap = $('#wrap');
  var boxes = wrap.children('div');
  //加载盒子
   waterfall(wrap, boxes);

});

jquery实现瀑布追加的效果

//模拟数据
var data = [{
    "src": "1.png",
    "title": "第一怪 竹筒当烟袋"
}, {
    "src": "2.png",
    "title": "第二怪 草帽当锅盖"
}, {
    "src": "3.png",
    "title": "第三怪 这边下雨那边晒"
}, {
    "src": "4.png",
    "title": "第四怪 四季服装同穿戴"
}, {
    "src": "5.png",
    "title": "第五怪 火车没有汽车快"
}, {
    "src": "6.png",
    "title": "第六怪 火车不通国内通国外"
}, {
    "src": "7.png",
    "title": "第七怪 老奶爬山比猴快"
}, {
    "src": "8.png",
    "title": "第八怪 鞋子后面多一块"
}, {
    "src": "9.png",
    "title": "第九怪 脚趾四季露在外"
}, {
    "src": "10.png",
    "title": "第十怪 鸡蛋拴着卖"
}, {
    "src": "11.png",
    "title": "第十一怪 粑粑叫饵块"
}, {
    "src": "12.png",
    "title": "第十二怪 花生蚕豆数着卖"
}, {
    "src": "13.png",
    "title": "第十三怪 三个蚊子一盘菜"
}, {
    "src": "14.png",
    "title": "第十四怪 四个老鼠一麻袋"
}, {
    "src": "15.png",
    "title": "第十五怪 树上松毛扭着卖"
}, {
    "src": "16.png",
    "title": "第十六怪 姑娘叫老太"
}, {
    "src": "17.png",
    "title": "第十七怪 小和尚可以谈恋爱"
}, {
    "src": "18.png",
    "title": "第十八怪 背着娃娃谈恋爱"
}];

function waterfall(wrap,boxes){

  var windowWidth=$(window).width();

  var boxWidth = boxes.eq(0).outerWidth()+20;

  var colsNumber = Math.floor(windowWidth / boxWidth);

  // console.log(colsNumber);
  // 设置容器的宽度

  wrap.width(boxWidth * colsNumber);

  // 定义一个数组并存储每一列的高度
  var everyHeight = new Array();
  for(var i=0;i<boxes.length;i++){
    if(i<colsNumber){
      everyHeight[i] = boxes.eq(i).outerHeight()+20;
    }else{
      //找到当前数组最小的值，以及Index
      var minHeight =everyHeight[0];
      var minIndex = 0;
      for(var j=0;j<colsNumber;j++){
        if(everyHeight[j]<minHeight){
          minIndex = j;
          minHeight = everyHeight[j];
        }
      }
      //将新的Box添加到最短的那列

      // console.log(minIndex);

      //设置盒子样式
      setStyle(boxes.eq(i), minHeight, boxes.eq(minIndex).position().left, i);

      everyHeight[minIndex] += boxes.eq(i).outerHeight()+20;
    }
    //鼠标经过呈现半透明的交互效果
    boxes.eq(i).hover(function(event) {
      $(this).stop().animate({
        'opacity': '0.5'
      }, 500);
    }, function(event) {
      $(this).stop().animate({
        'opacity': '1'
      }, 500);
    })
  }
}

//设置追加盒子样式
var getStartNumber = 0;
function setStyle(box, top, left, index){

  if (getStartNumber >= index) {
    return false;
  };

  box.css({
    'position': 'absolute',
    'top': top,
    'left': left,
    'opacity': '0'
  }).stop().animate({
    'opacity': '1'
  }, 1000);

  getStartNumber = index;
}

//判断是否scroll到底部
function scrollBottom(wrap){
  // 最后一个盒子的高度+其所在列的高度 <= 文档的高度+scrollTop 就判断到底部
  var documentHeight = $(window).height();
  var scrollHeight = $(window).scrollTop();

  var boxes = wrap.children('div');
  var lastBoxTop = boxes.eq(boxes.length-1).offset().top;
  var lastHeight = boxes.eq(boxes.length - 1).outerHeight();
  var lastColHeight = lastBoxTop + lastHeight;
  console.log(lastColHeight);
  console.log(documentHeight + scrollHeight);
  return documentHeight + scrollHeight >= lastColHeight ? true : false;
}


//追加盒子函数
function appendBox(wrap){
  if(scrollBottom(wrap)){
    for(var i in data){
      var innerString = '<div><img src="images/' + data[i].src + '"><a href="#">' + data[i].title + '</a></div>';
      wrap.append(innerString);
    }
  }else{
    return false;
  }
  // 实现瀑布流效果
  waterfall(wrap, wrap.children('div'));
}

$(document).ready(function event(){
  var wrap = $('#wrap');
  var boxes = wrap.children('div');
  //加载盒子
   waterfall(wrap, boxes);

   $(this).scroll(function(event){
     appendBox(wrap);
   })
});