解析瀑布流布局:JS+绝对定位的实现

让我详细讲解一下“解析瀑布流布局:JS+绝对定位的实现”的完整攻略。

瀑布流布局的概念

瀑布流布局是一种常见的网页布局，特点是每一列中的元素高度不一，但是宽度相同，多用于展示图片或商品列表等。它的优点是能够更好地利用页面空间，同时呈现出很好的视觉效果。

实现瀑布流布局的思路

实现瀑布流布局的核心是要在页面中动态生成元素，并将这些元素摆放在页面的不同位置。下面介绍一下实现的具体思路：

1. 确定页面中需要呈现几列数据，以及每一列的宽度，比如可以将一张图片作为每一列的宽度。

2. 通过 JavaScript 动态生成页面中需要呈现的元素，比如使用 AJAX 请求后端数据，并将数据解析成 HTML 代码插入到页面中。

3. 摆放元素的位置，需要使用 CSS 中的绝对定位来实现。通过设置每一个元素的 left 和 top 值，将其摆放到适当的位置上。为了不让元素重叠，还需要记录每一列中最后一个元素的位置信息，确定新元素需要摆放的位置。

4. 加载更多数据，可以通过监听滚动事件来判断是否加载更多的数据，也可以通过设置“加载更多”按钮，将其点击事件绑定到一个函数中，实现加载更多数据。

示例一：使用 jQuery 和 Masonry 插件实现的瀑布流布局

首先，我们需要引入 jQuery 和 Masonry 插件：

  <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdn.bootcss.com/masonry/4.1.1/masonry.pkgd.min.js"></script>

接着，我们需要在 HTML 页面中设置对应的容器元素，比如：

  <div id="container">
    <!-- 根据后端返回数据动态生成的元素会被插入到这里 -->
  </div>

然后，我们需要在 JavaScript 中监听 DOM 加载事件，对容器元素进行 Masonry 插件初始化：

$(document).ready(function(){
  var container = $('container');
  container.masonry({
    itemSelector: '.item',
    columnWidth: 230
  });
});

最后，我们将 AJAX 获取到的数据插入到容器中，每个数据以 .item 这个样式包裹起来，也可附加其他样式，如：

$.ajax({
  type: "get",
  url: "data.json",
  dateType: "json",
  success: function(data){
    for(var i=0; i<data.length; i++){
      var itemHtml = '<div class="item"><img src="' + data[i].img_path + '" /><p>' + data[i].description + '</p></div>';
      container.prepend(itemHtml);
      container.masonry('prepre',$(itemHtml));  // 这里是插入新元素
    }
  }
});

示例二：使用原生 JavaScript 实现的瀑布流布局

首先，我们需要在 HTML 页面中设置对应的容器元素，比如：

  <div id="container">
    <!-- 根据后端返回数据动态生成的元素会被插入到这里 -->
  </div>

然后，我们需要在 JavaScript 中设置一些变量，比如：

var container = document.getElementById('container');
var columns = 4;  // 设置几列数据（const 这里暂不考虑兼容）
var imgWidth = 230; // 每列的宽度
var gapH = 10; // 横向间距
var gapV = 10; // 纵向间距
var imgArray = []; // 用来存储所有照片，便于后续位置排布

接着，我们需要定义一个函数，用来生成每个元素的代码：

function createImgHtml(imgSrc, imgHeight, imgDesc){
  //此处代码省略，可根据实际需求定制的 HTML 代码
}

然后，我们需要在 JavaScript 中设置一个函数，用来计算每个元素的位置（left 和 top 值）：

function getPosition(){
  for(var i=0; i<imgArray.length; i++){
    if(i < columns){
      imgArray[i].style.left = (imgWidth + gapH) * i + 'px';
      imgArray[i].style.top = 0 + 'px';
    } else {
      var obj = getMinHeight(); // 获取当前最矮的列
      imgArray[i].style.left = obj.left + 'px';
      imgArray[i].style.top = obj.height + gapV + 'px';
      obj.height += imgArray[i].offsetHeight + gapV;
    }
  }
}

接下来，定义一个函数，用于获取所有元素中最矮的一列，并返回它的位置：

function getMinHeight(){
  var minHeight = imgArray[0].offsetHeight;
  var index = 0;
  for(var i=0; i<columns; i++){
    if(minHeight > imgHeightArr[i]){
      minHeight = imgHeightArr[i];
      index = i;
    }
  }
  return {
    height: minHeight,
    left: (imgWidth + gapH) * index
  }
}

最后，我们将 AJAX 获取到的数据插入到容器中，每个数据以 .img-block 这个样式包裹起来，也可附加其他样式，如：

xhr.onreadystatechange = function(){
  if(xhr.readyState === 4 && xhr.status === 200){
    var dataObj = JSON.parse(xhr.responseText);
    for(var i=0; i<dataObj.length; i++){
      var imgHtml = createImgHtml(dataObj[i].imgSrc, dataObj[i].imgHeight, dataObj[i].imgDesc);
      container.innerHTML += imgHtml;
      imgArray.push(container.lastChild); //将最后一个元素加入数组，便于后续位置排布
    }
    getPosition(); //计算位置信息
  }
}

以上就是使用原生 JavaScript 和 jQuery + Masonry 插件实现瀑布流布局的攻略。