由于是新手第一次寫繁扎，所以廢話不多說，直接奔主題芹啥，今天就來說說瀑布流的那些事锻离，近來各大網(wǎng)站都喜歡用瀑布流來布局，瀑布流已經(jīng)成為一種非常流行的頁面布局了墓怀，尤其是一些購物網(wǎng)站汽纠，不論是移動端還是我們前端，用參差不齊的多欄布局傀履，隨著頁面滾動條向下滾動虱朵，這種布局還會不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部莉炉。例如：
? ? ?好了，在開始寫代碼之前碴犬，我們先來分析一下瀑布流布局的幾大步驟：
1.讓父盒子水平居中顯示(#main)
** 1.1.設(shè)置盒子的width
** 1.2.設(shè)置盒子的margin(0 auto)
?2.除了第一行的盒子不需要做定位,其余行的盒子都需要做定位
?3.判斷什么時(shí)候加載后續(xù)的其他盒子條件
?4.當(dāng)滿足第三部的加載其他盒子的條件的時(shí)候,如果加載出新數(shù)據(jù)(造數(shù)據(jù))
?分析完了絮宁，那么下面直接上代碼了：
一。先布局
先從css布局開始：父盒子中間有一個(gè)大的盒子服协，然后再套一個(gè)小盒子用來裝img標(biāo)簽放圖片绍昂，首先把大盒子多復(fù)制幾個(gè)，最好復(fù)制15個(gè)以上偿荷，因?yàn)槿绻綍r(shí)候圖片出來顯示不滿第一屏窘游，就沒有右邊滾動條，我當(dāng)時(shí)就是圖片放少了跳纳，沒有滾動條忍饰，無法繼續(xù)往下滾動來看效果的。
這里我直接貼代碼了
*{
margin:0;
padding:0;
}
img
{
/*去掉圖片之間的縫隙*/
vertical-align:top;
}
#main
{
position:relative;
}
.box
{
/*background: red;*/
float:left;
padding:10px0 0 10px;
}
.pic
{
padding:10px;
border:1px solid#cccccc;
border-radius:8px;
box-shadow:0 0 10px#ddd;
background:#ffffff;
}
.picimg
{
width:160px;
}
二寺庄。JS部分
前面我們分析了瀑布流的布局：
1.讓父盒子水平居中顯示(#main)
** 1.1.設(shè)置盒子的width
** 1.2.設(shè)置盒子的margin(0 auto)
這里的waterFlow是對瀑布流布局封裝的一個(gè)方法艾蓝，具體實(shí)現(xiàn)步驟：
1.獲取所有的盒子 2.求出任何一個(gè)盒子的寬度 3.求出當(dāng)前屏幕寬度 4.求出每一行顯示的盒子 5.讓父盒子進(jìn)行居中顯示（在任何屏幕下都居中）
2.除了第一行的盒子不需要做定位,其余行的盒子都需要做定位
下面是遍歷所有子盒子：
3.判斷什么時(shí)候加載后續(xù)的其他盒子條件
注意：這里我們用到的方法是依最后一個(gè)盒子高度出來一半的時(shí)候就加載后面的盒子！
4.當(dāng)滿足第三部的加載其他盒子的條件的時(shí)候,如果加載出新數(shù)據(jù)(造數(shù)據(jù))
注意：加載完新數(shù)據(jù)要再次調(diào)用waterFlow這個(gè)方法
github地址：github.com/guoshilin/-JavaScript
