当前位置：首页 > jquery

jquery瀑布流

2026-02-03 16:06:50jquery

jQuery瀑布流实现方法

瀑布流是一种常见的网页布局方式，特点是等宽不等高，元素按顺序排列，自动填充最短列。以下是使用jQuery实现瀑布流的几种方法：

基础实现原理

获取所有瀑布流元素的宽度和高度，计算每列当前高度，将新元素添加到最短列。需要监听窗口大小变化和滚动事件以实现动态加载。

$(function() {
  var $container = $('#waterfall');
  var $items = $('.item');
  var columnCount = Math.floor($(window).width() / 220); // 假设每个元素宽200px，间距20px
  var columnHeights = [];

  // 初始化列高数组
  for (var i = 0; i < columnCount; i++) {
    columnHeights.push(0);
  }

  // 计算每列高度并定位元素
  $items.each(function() {
    var minHeight = Math.min.apply(null, columnHeights);
    var index = columnHeights.indexOf(minHeight);

    $(this).css({
      'position': 'absolute',
      'left': index * 220 + 'px',
      'top': minHeight + 'px'
    });

    columnHeights[index] += $(this).outerHeight(true);
  });

  // 设置容器高度
  $container.height(Math.max.apply(null, columnHeights));
});

使用Masonry插件

Masonry是专门用于瀑布流布局的jQuery插件，实现更简单高效：

$(function() {
  $('#waterfall').masonry({
    itemSelector: '.item',
    columnWidth: 200,
    gutter: 20
  });
});

响应式处理

添加窗口大小变化事件监听，重新计算布局：

$(window).resize(function() {
  $('#waterfall').masonry('layout');
});

滚动加载更多

结合滚动事件实现无限加载：

jquery瀑布流

$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 100) {
    // 加载新数据
    loadMoreItems();
  }
});

function loadMoreItems() {
  // AJAX获取数据
  $.get('more_items.php', function(data) {
    var $newItems = $(data);
    $('#waterfall').append($newItems).masonry('appended', $newItems);
  });
}