jquery 下拉加载+ 瀑布流+mustache

下面是一个基于 jQuery、瀑布流和 Mustache 模板的下拉加载示例：

HTML 结构：

<div id="waterfall">
  <div class="waterfall-item">
    <img src="image1.jpg" alt="">
    <h3>Image Title 1</h3>
  </div>
  <div class="waterfall-item">
    <img src="image2.jpg" alt="">
    <h3>Image Title 2</h3>
  </div>
  <!-- ... -->
</div>
<div id="load-more">
  <button>Load More</button>
</div>

<!-- Mustache 模板 -->
<script id="template" type="x-tmpl-mustache">
  {{#images}}
  <div class="waterfall-item">
    <img src="{{src}}" alt="{{alt}}">
    <h3>{{title}}</h3>
  </div>
  {{/images}}
</script>

CSS 样式：

#waterfall {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.waterfall-item {
  width: 30%;
  margin-bottom: 20px;
}

.waterfall-item img {
  display: block;
  width: 100%;
}

.waterfall-item h3 {
  margin-top: 10px;
  font-size: 16px;
  text-align: center;
}

#load-more {
  text-align: center;
  margin-top: 20px;
}

JavaScript 代码：

$(function() {
  var page = 1; // 当前页数
  var perPage = 10; // 每页显示的数量
  var isLoading = false; // 是否正在加载数据
  var template = $('#template').html(); // Mustache 模板
  var $waterfall = $('#waterfall'); // 瀑布流容器
  var $loadMore = $('#load-more'); // 加载更多按钮

  // 加载数据函数
  function loadData() {
    if (isLoading) return; // 如果正在加载数据，则退出
    isLoading = true; // 设置正在加载数据
    $.ajax({
      url: 'data.json',
      type: 'get',
      data: { page: page, perPage: perPage },
      dataType: 'json',
      success: function(res) {
        if (res.length < perPage) {
          $loadMore.hide(); // 如果数据不足一页，则隐藏“加载更多”按钮
        }
        var html = Mustache.render(template, { images: res });
        $waterfall.append(html).imagesLoaded(function() {
          $waterfall.masonry('appended', $waterfall.find('.waterfall-item'));
        });
        page++; // 加载下一页数据
        isLoading = false; // 设置加载完毕
      }
    });
  }

  // 初始化瀑布流
  $waterfall.masonry({
    itemSelector: '.waterfall-item',
    columnWidth: '.waterfall-item',
    gutter: 20
  });

  // 绑定“加载更多”按钮事件
  $loadMore.on('click', function() {
    loadData();
  });

  // 初始化时加载第一页数据
  loadData();
});

其中，`data.json` 是一个返回 JSON 格式数据的 URL，必须按照传入的 `page` 和 `perPage` 参数返回对应数量的数据。`Mustache.render` 方法用于将数据渲染为 HTML，`imagesLoaded` 插件用于等待所有图片加载完毕后再执行瀑布流布局，`masonry` 插件用于实现瀑布流布局。