javascript瀑布流布局实现方法详解

请听我一一道来。

标题

JavaScript瀑布流布局实现方法详解

瀑布流布局概述

瀑布流布局（Waterfall Layout）也称为瀑布流式布局，是一种常见的网页布局形式，常用来展现图片等等等，具有美观、灵活的特点。随着JavaScript技术的不断发展，如何用JS来实现瀑布流布局呢？下面来详细讲解。

实现方法

瀑布流布局实现方法可以分为2种：基于CSS实现和基于JS实现。基于CSS实现的方式比较简单，但灵活性较低；基于JS实现的方式灵活性较高，但要考虑更多的细节问题。下面分别来介绍这2种实现方式。

1. 基于CSS实现

CSS实现瀑布流布局主要依赖column-count属性和column-width属性。具体实现方法如下：

.container {
  column-count: 3;  /* 列数 */
  column-width: 300px;  /* 列宽 */
}

需要注意的是，column-count属性不兼容IE浏览器。同时，如果布局中的图片瀑布流效果要求比较高，例如图片要进行排版优化、动画展示等，则需要考虑使用JS实现。

2. 基于JS实现

JS实现瀑布流布局主要分为2步：

2.1 获取数据

通过AJAX从服务器端获取数据，可以根据实际需要对获取的数据进行筛选、分类等处理。

function getData(callback) {  
  // TODO：从服务器端获取数据
  callback(data);  // 返回处理过的数据
}

2.2 布局渲染

获取数据后，需要对数据进行布局渲染。具体实现过程如下：

（1）创建DOM节点

function createDom(imgUrl) {
  var div = document.createElement('div');
  var img = document.createElement('img');
  img.src = imgUrl;
  div.appendChild(img);
  return div;
}

（2）计算布局

首先需要确定列数，其次需要根据图片高度进行布局计算。

function calcPosition(heightArr, imgWidth, imgHeight) {
  var minIndex = 0;
  var minVal = heightArr[0];
  for (var i = 0; i < heightArr.length; i++) {
    if (heightArr[i] < minVal) {
      minIndex = i;
      minVal = heightArr[i];
    }
  }
  var x = minIndex * imgWidth;
  var y = minVal;
  heightArr[minIndex] += imgHeight;
  return { x: x, y: y };
}

（3）布局渲染

function render(data) {
  var container = document.getElementById('container');
  var imgWidth = 200;  // 图片宽度
  var heightArr = [0, 0, 0];  // 列高度数组
  for (var i = 0; i < data.length; i++) {
    var div1 = createDom(data[i].imgUrl);
    var div2 = document.createElement('div');
    div2.innerHTML = data[i].title;
    div1.appendChild(div2);
    var imgHeight = imgWidth * data[i].height / data[i].width;
    var pos = calcPosition(heightArr, imgWidth, imgHeight);
    div1.style.left = pos.x + 'px';
    div1.style.top = pos.y + 'px';
    container.appendChild(div1);
  }
}

以上就是基于JS实现瀑布流布局的详细步骤。

示例说明

示例一：基于CSS实现的瀑布流布局

通过下面这段代码实现，可以实现一个基于CSS实现的瀑布流布局。

<div class="container">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <img src="..." alt="...">
  <!-- 其他图片 -->
</div>

CSS样式如下：

.container {
  column-count: 3;
  column-width: 300px;
}

示例二：基于JS实现的瀑布流布局

通过下面这段代码实现，可以实现一个基于JS实现的瀑布流布局。

<div id="container"></div>

JS代码如下：

getData(function (data) {
  render(data);
})