在淘寶等各大的網(wǎng)站我們不難發(fā)現(xiàn).圖片的加載都占用整個網(wǎng)頁;接下來我們就來實現(xiàn)它, 1 ,css 布局部分 1:給外面做個大的mai_box(給它設(shè)置margin:0 auto)放全部的box.給box設(shè)置padding:10px 0 0 10px. box里面嵌套一個div.這個div就設(shè)邊框,再給它padding:10px; 它的里面就是img了; 這布局其實是再簡單不過了.但是我們不是有多少圖片都全部放在HTML中.我們就是布局一部分,好讓我們的思路清晰明了.其實,在瀑布流中圖片的加載都是從網(wǎng)絡(luò)上獲取,所以我們就必須動態(tài)的創(chuàng)建圖片(javascript 來實現(xiàn)) 這里我們就用到前天我們用到的underscore-min.js 框架了 _min 列如 var numbers = [10, 5, 100, 2, 1000];
_.min(numbers);
=> 2
js步驟 : 創(chuàng)建一個假的數(shù)組,(當(dāng)然了,里面可都是貨真價值的好東西,他們才是我們工作前的第一要素.) 數(shù)組里面放著圖片的 src ,(列如 [({src:'21.jpg'},{src:'11.jpg'},{src:'1.jpg'},{src:'12.jpg'})] 他是我們創(chuàng)建圖片并加載圖片的前提條件 ; 有了這個數(shù)組以后,我們就考慮當(dāng)屏幕被點擊滾動觸發(fā)的時候所發(fā)生的事件;滾動吧,就用到定時器了.
一 實現(xiàn) box_main 居中
二 讓第一排不定位 其他都定位
三 判斷是不是第一排
求出盒子對應(yīng)的索引

/**

• Created by xmg on 2017/5/31.
  */

/***

• 1.讓父盒子水平居中顯示(#main)
• 1.1.設(shè)置盒子的width
• 1.2.設(shè)置盒子的margin(0 auto)
• 2.除了第一行的盒子不需要做定位,其余行的盒子都需要做定位
• 3.判斷什么時候加載后續(xù)的其他盒子
• 4.當(dāng)滿足第三部的加載其他盒子的條件的時候,如果加載出新數(shù)據(jù)(造數(shù)據(jù))
• **/

function $(tagId) {
return document.getElementById(tagId);
}

window.onload = function () {
//1.讓父盒子居中顯示
waterFlow('main','box')
}

//瀑布流布局
function waterFlow(parent,box) {
//1.獲取所有的盒子
var allBox = $(parent).getElementsByClassName(box);
//2.求出任意一個盒子的寬度
var boxWidth = allBox[0].offsetWidth;

//3.求出當(dāng)前屏幕的寬度
var clientW = document.body.clientWidth||document.documentElement.clientWidth;

//4.求出每一行顯示的盒子
var cols = Math.floor(clientW/boxWidth);
//
// alert(cols);
//5.讓父盒子進行居中顯示
$(parent).style.width = cols * boxWidth +'px';
$(parent).style.margin = '0 auto';


//2.除了第一行的盒子不需要做定位,其余行的盒子都需要做定位

var heightArr =[];
//遍歷所有的子盒子
for(var i=0;i<allBox.length;i++)
{

    //1.求出每一個盒子的高度
    var boxHeight = allBox[i].offsetHeight;

    //是否是第一行
    //
    // //第一行
    if(i<cols)
    {
      heightArr.push(boxHeight);
    }
    //  //不是第一行
    else
    {
      //2.取出數(shù)組中第一行高度最矮的盒子
        var minBoxHeight = _.min(heightArr);

        //3.求出數(shù)組中高度最矮盒子對應(yīng)的索引
        var minBoxHeightIndex = getBoxHeightIndex(heightArr,minBoxHeight);


        //4.定位其他行的所有盒子
        allBox[i].style.position = 'absolute';
        allBox[i].style.left = minBoxHeightIndex*boxWidth+'px';
        allBox[i].style.top = minBoxHeight+'px';
    }

    //更新高度數(shù)組中最矮盒子的索引位置
    heightArr[minBoxHeightIndex]+=boxHeight;
}
// console.log(heightArr,minBoxHeight,minBoxHeightIndex);

}

/***

• 求出最矮盒子在高度數(shù)組對應(yīng)的索引位置
  */
  function getBoxHeightIndex(arr,value) {
  for(var i=0;i<arr.length;i++)
  {
  //判斷
  if(arr[i]==value) return i;
  }
  }