js实现的美女瀑布流效果代码

2023年6月11日上午7:00 • JavaScript

这里是“js实现的美女瀑布流效果代码”的完整攻略：

瀑布流效果简介

瀑布流效果（Waterfall Flow）是指像瀑布一样一列接一列的布局方式。随着页面滚动，页面中的图片会自动根据设置好的列数和间距排列，并且会动态加载。瀑布流效果是现代网站中十分流行的一种图片展示方式。

实现方法

瀑布流效果的实现方法比较多，包括纯CSS实现和JS实现。纯CSS实现的瀑布流缺点是浏览器兼容性不佳，使用JS实现较多。

步骤

Step1：引入必要的文件

在HTML文件中，需要引入jQuery库和CSS文件。

<head>
  <meta charset="utf-8">
  <title>瀑布流效果</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

Step2：定义图片布局盒子

在HTML中定义一个直接包裹图片的盒子，该盒子设置为绝对定位，以便于图片的动态排列。

<div id="wrapper">
  <!-- 图片布局盒子 -->
  <div id="pic-ct"></div>
</div>

Step3：动态加载图片

使用AJAX动态加载图片，并将图片插入到图片布局盒子中。

 function loadPic () {
        var data = [
          {src: 'image/1.jpg'},
          {src: 'image/2.jpg'},
          {src: 'image/3.jpg'},
          ...
          {src: 'image/24.jpg'},
          {src: 'image/25.jpg'}
        ];
        $(window).on('scroll', function () {
          if (isVisible($('#last')) && !isloaded) {
            console.log('scrolling...');
            isloaded = true;
            $.each(data, function(index, value){
              var newImg = $('<img>').attr('src', value.src);
              newImg.on('load', function(){
                $('#pic-ct').append($(this));
                $('#last').removeAttr('id');
                isloaded = false;
              })
            })
          }
        })
      }

该函数中需要定义待动态加载的图片路径列表data，用以从服务器端请求图片资源。scroll监听函数是触发图片动态加载的最终条件，isVisible()函数和isLoaded标识是判断是否到达底部的工具函数。

其中，isVisible()函数的实现如下：

function isVisible ($el) {
    var scrollTop = $(window).scrollTop(),
        windowHeight = $(window).height(),
        offsetTop = $el.offset().top;
    if (scrollTop + windowHeight < offsetTop) {
      return false;
    } else {
      return true;
    }
  }

偏移量(offsetTop)是指元素的顶部到文档的顶部的距离。

Step4：图片布局

最后一个关键步骤，利用JS实现图片的自适应瀑布流排列。

  function renderPic () {
        var colHeight = [],
            colNum = parseInt($('#pic-ct').width()/$('#pic-ct img').outerWidth(true));
        for (var i=0; i<colNum; i++) {
          colHeight.push(0)
        }
        $('#pic-ct img').each(function(){
          var minH = Math.min.apply(null, colHeight),
              minHIndex = colHeight.indexOf(minH);
          $(this).css({
            'position':'absolute',
            'top': minH,
            'left': $('#pic-ct img').outerWidth(true)*minHIndex
          })
          colHeight[minHIndex] += $(this).outerHeight(true);
        })
        // 添加一个边框占位符，避免最后一行图片高度不够
        $('<div>').attr('id', 'last').appendTo($('#pic-ct')).css({
          'width': $('#pic-ct img').outerWidth(true)*colNum,
          'height': '0px'
        })
      }

该函数需要获取到图片数组picArr以及列数colNum，计算每一列当前的图片高度，然后将下一张待定位的图片添加到高度最小的那一列。最后，必须添加一个末界框（border）插入到图片容器中，以改变高度占比。如果没有一个边框占位符，有可能会存在最后一行图片高度未达到屏幕宽度而排版混乱和错位的问题。