waterFall

--- theme: cyanosis highlight: agate --- # 手把手带你攻克瀑布流布局 ## 前言 > 瀑布流布局，是现在比较流行的一种页面布局方式，即`多行等宽`元素排列，`等宽不等高`，后面的元素`依次`添加到`前一行最矮`的元素`下方`。它可以有效的降低页面的复杂度，节省很多的空间；并且，瀑布流的参差不齐的排列方式，可以通过界面展示给用户多条数据，并且让用户可以有向下浏览的冲动，提供了很好的用户体验！例如淘宝的页面就采用了这种布局方式，给大家看看**淘宝的瀑布流布局的效果图**（手机端）以及**我们要实现的效果图**（PC端）吧~

## 思路准备通过了解瀑布流布局的方式，我们来梳理一下实现它的步骤，方便我们代码的编写。 1、首先我们需要准备**很多张图片**（我这准备的是40张），还有**vscode**开发工具。 2、编写**前端**代码，给图片**添加样式**让图片**等宽并同行**显示。 3、编写**js**代码，要知道**第一行图片数量**，**下一张图片的序号**以及**前一行最矮的元素的序号**，还有**摆放的位置**。 ## 正文 ### 一、前端代码编写 >1、首先我们定义一个**container**容器来装**所有图片**，在这个容器中用**box**容器装**box-img**容器再装入**每张图片**，这样方便之后样式的编写。 >2、使图片**同行**显示--给box容器使用**float:left;属性**。 >3、让图片**等宽**显示--给box-img容器设置**width:150px;**，img标签设置**width:100%;继承父容器box-img高度的100%**。 >4、为了使效果更好看，我们给装图片的容器设置**内边距，边框和阴影**的效果。前端完整代码附上： ```html waterFall

/*.......后面接39个box，此处省略*/

``` ### 二、js代码编写 #### 1、首先用window.onload=function(){}来实现页面加载完毕后立即执行的功能在这个函数中，我们调用**imgLocation('container','box')函数**来呈现最终效果，传入的实参是**父容器**'container'以及装图片的**子容器**'box'。 ```js window.onload=function() { imgLocation('container','box') } ``` #### 2、实现imgLocation()函数功能 ##### 1）首先我们得`获取所有要摆放的图片`，并将其存入一个`数组`中利用document.getElementById(parent)得到父容器；调用**getChildElement(cparent,content)方法**，在这个方法中，先获取**父容器所有标签**，对所有标签**遍历**并用if条件语句**得到类名为box的容器**（装图片的容器），将其**存入**我们自己构建的一个**数组**中，返回值为这个数组，方便之后通过遍历来操作图片摆放的位置。 ```js function imgLocation(parent,content){ var cparent=document.getElementById(parent) //cparent下的所有的第一层的子容器 box var ccontent=getChildElement(cparent,content)//数组，40个div } //取到父容器中的某一层子容器 function getChildElement(parent,content){ var contentArr=[] var allContent=parent.getElementsByTagName('*')//通过标签来选中得到一个数组 //遍历allContent把其中类名为content的容器都存到contentArr数组中 for(var i=0;i