jquery瀑布流

jQuery 瀑布流实现方法

瀑布流（Masonry）是一种流行的网页布局方式，常见于图片展示网站。以下是使用 jQuery 实现瀑布流的几种方法：

使用 jQuery Masonry 插件

1. 引入必要的库文件：

   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>

2. HTML 结构：

   <div class="grid">
   <div class="grid-item">...</div>
   <div class="grid-item">...</div>
   <!-- 更多项目 -->
   </div>

3. CSS 样式：

   

   .grid {
   margin: 0 auto;
   }
   .grid-item {
   width: 200px;
   margin-bottom: 10px;
   }

4. 初始化 Masonry：

   $(document).ready(function() {
   $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 200,
    gutter: 10
   });
   });

使用纯 jQuery 实现

1. HTML 结构保持不变

   

2. JavaScript 实现：

   
   $(function() {
   function waterfall() {
    var $grid = $('.grid');
    var $items = $('.grid-item');
    var colWidth = 200;
    var colCount = Math.floor($grid.width()/colWidth);
    var colHeights = [];
   
    for(var i = 0; i < colCount; i++) {
      colHeights.push(0);
    }
   
    $items.each(function() {
      var minHeight = Math.min.apply(null, colHeights);
      var index = colHeights.indexOf(minHeight);
   
      $(this).css({
        'position': 'absolute',
        'left': index * colWidth,
        'top': minHeight
      });
   
      colHeights[index] += $(this).outerHeight(true);
    });
   
    $grid.height(Math.max.apply(null, colHeights));
   }

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

#### 响应式瀑布流实现

1. 添加响应式断点：
```javascript
$(window).on('load resize', function() {
  var windowWidth = $(window).width();
  var colWidth = windowWidth < 768 ? 150 : 200;

  $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: colWidth,
    gutter: 10
  });
});

1. 动态加载内容：

   function loadMoreItems() {
   $.get('load-more.php', function(data) {
    var $newItems = $(data);
    $('.grid').append($newItems).masonry('appended', $newItems);
   });
   }

图片加载完成后再布局

对于包含图片的瀑布流，需要在图片加载完成后重新布局：

$('.grid').imagesLoaded().progress(function() {
  $('.grid').masonry('layout');
});

这些方法提供了从简单到复杂的瀑布流实现方案，可以根据项目需求选择合适的实现方式。插件方式更简单高效，而纯 jQuery 实现则更灵活可控。