js实现仿百度瀑布流的方法

下面是实现仿百度瀑布流的方法的完整攻略，主要包括以下步骤：

步骤一：添加HTML结构和CSS样式

首先需要在HTML中添加列表结构，以及定义每个元素的CSS样式。通常瀑布流等容器都是由 div 元素嵌套而成：

<div class="waterfall">
  <div class="item"><img src="image-1.jpg"></div>
  <div class="item"><img src="image-2.jpg"></div>
  <div class="item"><img src="image-3.jpg"></div>
  ...
</div>

在CSS中，需要给容器以及每个元素设置样式，包括宽高、间距、边框、背景色等等：

.waterfall {
  margin: 0 auto;
  width: 1000px;
}

.item {
  display: inline-block;
  width: 300px;
  margin: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f8f8f8;
}

步骤二：获取数据并渲染元素

接下来需要通过JavaScript获取数据，以及将数据渲染到HTML中。在这里我们可以通过Ajax请求异步获取数据：

function getData(callback) {
  // ajax请求获取数据
  // 数据获取成功后将数据传递给回调函数
  var data = [ {...}, {...}, {...} ];
  callback(data);
}

然后将获取到的数据渲染到HTML中，这里可以使用jQuery的方法来实现：

getData(function(data) {
  var html = '';
  $(data).each(function(index, item) {
    html += '<div class="item"><img src="' + item.imgUrl + '"></div>';
  });
  $('.waterfall').append(html);
});

步骤三：实现瀑布流布局

接下来就是瀑布流布局的核心部分。在这里我们可以使用JavaScript来实现布局，具体做法是：

1. 计算列数

首先需要计算出当前容器可以显示的列数。可以通过以下公式计算：

var colWidth = $('.item').outerWidth(true); // 列宽度
var colCount = Math.floor($('.waterfall').width() / colWidth); // 列数

2. 创建列高数组

创建一个数组，保存每一列的高度，初始高度为0：

var colHeightArr = [];
for (var i = 0; i < colCount; i++) {
  colHeightArr.push(0);
}

3. 获取每个元素的高度，并插入到高度最小的列中

遍历列表中的每一个元素，获取其高度，并插入到高度最小的列中：

$('.item').each(function(index, item) {
  var colHeight = Math.min.apply(null, colHeightArr); // 获取列中最小高度
  var colIndex = $.inArray(colHeight, colHeightArr); // 获取最小高度的列的索引
  $(item).css({
    top: colHeight + 'px',
    left: colIndex * colWidth + 'px'
  });
  colHeightArr[colIndex] += $(item).outerHeight(true); // 更新最小列高度
});

4. 完成瀑布流布局

最后，将最高的列高度作为容器的高度，从而完成瀑布流的布局：

var maxHeight = Math.max.apply(null, colHeightArr); // 获取最大列高度
$('.waterfall').height(maxHeight + 'px'); // 设置容器高度

示例说明

这里提供两个示例，分别是使用JavaScript原生方法以及jQuery实现瀑布流布局。

示例一：使用JavaScript原生方法实现瀑布流布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JavaScript实现瀑布流布局</title>
  <style>
    .waterfall {
      margin: 0 auto;
      width: 1000px;
    }

    .item {
      display: inline-block;
      width: 300px;
      margin: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      background-color: #f8f8f8;
    }
  </style>
</head>
<body>
  <div class="waterfall"></div>
  <script>
    function getData(callback) {
      // ajax请求获取数据
      // 数据获取成功后将数据传递给回调函数
      var data = [
        {imgUrl: 'image-1.jpg'},
        {imgUrl: 'image-2.jpg'},
        {imgUrl: 'image-3.jpg'},
        {imgUrl: 'image-4.jpg'},
        {imgUrl: 'image-5.jpg'},
        ...
      ];
      callback(data);
    }

    function renderWaterfall(data) {
      var html = '';
      data.forEach(function(item) {
        html += '<div class="item"><img src="' + item.imgUrl + '"></div>';
      });
      var container = document.querySelector('.waterfall');
      container.innerHTML = html;

      var colWidth = document.querySelector('.item').offsetWidth + 20; // 列宽度
      var colCount = Math.floor(container.offsetWidth / colWidth); // 列数

      var colHeightArr = [];
      for (var i = 0; i < colCount; i++) {
        colHeightArr.push(0);
      }

      var items = document.querySelectorAll('.item');
      items.forEach(function(item) {
        var colHeight = Math.min.apply(null, colHeightArr); // 获取列中最小高度
        var colIndex = colHeightArr.indexOf(colHeight); // 获取最小高度的列的索引
        item.style.cssText += 'top:' + colHeight + 'px;left:' + colIndex * colWidth + 'px;';
        colHeightArr[colIndex] += item.offsetHeight + 20; // 更新最小列高度
      });

      container.style.height = Math.max.apply(null, colHeightArr) + 'px'; // 设置容器高度
    }

    getData(function(data) {
      renderWaterfall(data);
    });
  </script>
</body>
</html>

示例二：使用jQuery实现瀑布流布局

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery实现瀑布流布局</title>
  <style>
    .waterfall {
      margin: 0 auto;
      width: 1000px;
    }

    .item {
      display: inline-block;
      width: 300px;
      margin: 10px;
      padding: 10px;
      border: 1px solid #ccc;
      background-color: #f8f8f8;
    }
  </style>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    function getData(callback) {
      // ajax请求获取数据
      // 数据获取成功后将数据传递给回调函数
      var data = [
        {imgUrl: 'image-1.jpg'},
        {imgUrl: 'image-2.jpg'},
        {imgUrl: 'image-3.jpg'},
        {imgUrl: 'image-4.jpg'},
        {imgUrl: 'image-5.jpg'},
        ...
      ];
      callback(data);
    }

    function renderWaterfall(data) {
      var html = '';
      $.each(data, function(index, item) {
        html += '<div class="item"><img src="' + item.imgUrl + '"></div>';
      });
      $('.waterfall').html(html);

      var colWidth = $('.item').outerWidth(true); // 列宽度
      var colCount = Math.floor($('.waterfall').width() / colWidth); // 列数

      var colHeightArr = [];
      for (var i = 0; i < colCount; i++) {
        colHeightArr.push(0);
      }

      $('.item').each(function(index, item) {
        var colHeight = Math.min.apply(null, colHeightArr); // 获取列中最小高度
        var colIndex = $.inArray(colHeight, colHeightArr); // 获取最小高度的列的索引
        $(item).css({
          top: colHeight + 'px',
          left: colIndex * colWidth + 'px'
        });
        colHeightArr[colIndex] += $(item).outerHeight(true) + 20; // 更新最小列高度
      });

      $('.waterfall').height(Math.max.apply(null, colHeightArr) + 'px'); // 设置容器高度
    }

    $(function() {
      getData(function(data) {
        renderWaterfall(data);
      });
    });
  </script>
</head>
<body>
  <div class="waterfall"></div>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js实现仿百度瀑布流的方法 - Python技术站