当前位置：首页 > jquery

jquery 瀑布流

2026-02-03 14:20:37jquery

jQuery 瀑布流实现方法

瀑布流布局是一种常见的网页布局方式，适用于图片、卡片等内容的展示。使用jQuery实现瀑布流布局可以通过以下步骤完成。

基础HTML结构

创建一个基本的HTML结构，包含容器和项目元素。

<div class="waterfall-container">
  <div class="item">内容1</div>
  <div class="item">内容2</div>
  <div class="item">内容3</div>
  <!-- 更多项目 -->
</div>

CSS样式设置

设置容器和项目的样式，确保项目可以浮动排列。

.waterfall-container {
  position: relative;
  width: 100%;
}

.item {
  position: absolute;
  width: 200px; /* 固定宽度 */
  margin: 10px;
  box-shadow: 0 0 5px #ccc;
}

jQuery实现逻辑

使用jQuery动态计算每个项目的位置，实现瀑布流效果。

$(document).ready(function() {
  function waterfall() {
    var container = $('.waterfall-container');
    var items = $('.item');
    var containerWidth = container.width();
    var itemWidth = items.outerWidth(true);
    var columns = Math.floor(containerWidth / itemWidth);
    var heights = Array(columns).fill(0);

    items.each(function() {
      var minHeight = Math.min.apply(null, heights);
      var columnIndex = heights.indexOf(minHeight);

      $(this).css({
        top: minHeight,
        left: columnIndex * itemWidth
      });

      heights[columnIndex] += $(this).outerHeight(true);
    });

    container.height(Math.max.apply(null, heights));
  }

  waterfall();
  $(window).resize(waterfall);
});

动态加载更多内容

如果需要滚动加载更多内容，可以监听滚动事件并动态添加新项目。

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() >= $(document).height() - 100) {
    // 模拟加载新数据
    for (var i = 0; i < 5; i++) {
      $('.waterfall-container').append('<div class="item">新内容</div>');
    }
    waterfall();
  }
});

优化性能

为了提升性能，可以使用防抖（debounce）技术减少resize事件的触发频率。

function debounce(func, wait) {
  var timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, wait);
  };
}

$(window).resize(debounce(waterfall, 250));