电子商务系统的瀑布流布局(Waterfall layout)

一、什么叫瀑布流布局？

电子商务系统的瀑布流布局（Waterfall layout），又称为飞瀑流式布局，是一种在网站或移动应用程序中展现视频的设计方案方法，它将各种大小的小具体内容区块链以流式布局的形式顺序排列，照片中间并不是恰好两端对齐的，反而是参差错落，总会有照片看不到彻底，让用户可无限滚动地查看商品或具体内容，从而提升销售总额，被广泛应用于电子商务网站和移动智能终端中。

二、流式布局的完成基本原理及源码

那样流式布局的效果怎么样用web前端完成呢？文中选用较为基本的HTML CSS JavaScript技术进行。

1. HTML

HTML里边摆的物品非常简单，就是一个总体器皿container里嵌入大部分器皿box，里边又嵌入一个box-img，box-img里放图片。有些人说，干什么嵌入那么双层啊？主要是因为这么做方便我们增加款式及使用。

<div id="container">
        <div class="box">
            <div class="box-img">
                <img src="./img/1.jpg" alt="">
            </div>
        </div>
        <div class="box">
            <div class="box-img">
                <img src="./img/2.jpg" alt="">
            </div>
        </div>
 <div>

2. CSS

CSS中主要通过波动让照片一行一行排序，随后操纵器皿间的间隔，再加上外框和黑影。这儿container选用相对定位，由于相对定位会脱离文档流。

      * {
            margin: 0;
            padding: 0;
        }
        #container {
            position: relative;
        }
        .box{
            float: left;
            padding: 5px;
        }
        .box-img{
            width: 150px;
            padding: 5px;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
        }
        .box-img img{
            width: 100%;
        }

3.JavaScript

完成流式布局最重要的就是JS一部分，运用JavaScript计算图片位置和尺寸，随后把它们排序在恰当位置上，完成动画特效。

从总体上是第一行的图片没动，再从第二行第一张照片逐渐，算出第一行相对高度最小的图片，随后接在它们下边，修改照片的上边距和左边距，照片相对定位，最终更新图片高度，这般周而复始。

window.onload = function() {
  imgLocation('container', 'box')
}

// 掌握到全部要存放的照片
function imgLocation(parent, content) {
  var cparent = document.getElementById(parent)
  // cparent 中的每一个第一层的器皿 box
  var ccontent = getChildElement(cparent, content) // [ 安装了20个div ]

  // 从谁一开始是值得被的摆放的
  var winWidth = document.documentElement.clientWidth
  var imgWidth = ccontent[0].offsetWidth
  var num = Math.floor(winWidth / imgWidth)

  // 实际操作第 num 1 幅图
  var BoxHeightArr = []
  for (var i = 0; i < ccontent.length; i  ) {
    // 前num张只需计算高度
    if (i < num) {
      BoxHeightArr[i] = ccontent[i].offsetHeight
    } else {
      // 我们应该操控的box，把求最小值方式出借二维数组用
      var minHeight = Math.min.apply(null, BoxHeightArr)
      var minIndex = BoxHeightArr.indexOf(minHeight)
      ccontent[i].style.position = 'absolute'
      ccontent[i].style.top = minHeight   'px'
      ccontent[i].style.left = (imgWidth * minIndex)   'px'

      // 升级最矮的人的这一列高度
      BoxHeightArr[minIndex]  = ccontent[i].offsetHeight
    }
  }
}

// 得到父容器里某一层子器皿
function getChildElement(parent, content) {
  var contentArr = []
  var allContent = parent.getElementsByTagName('div') 
  // 赋值allContent 把在其中类名叫 content 的器皿都存进contentArr二维数组中
  for (var i = 0; i < allContent.length; i  ) {
    // 现阶段这一容器类名是否属于 content
    if (allContent[i].className == content) {
      contentArr.push(allContent[i])
    }
  }
  return contentArr
}

三、汇总

瀑布流布局的主要特点是能够把更多具体内容展现在一个页面上，进而提升用户体验和访问高效率。与传统目录式布局不一样，瀑布流布局的每一个具体内容块大小不一，依据具体内容高度全自动排序，使整个网页页面具有更高的美观度和挑战性。