用jQuery實現瀑布流效果學習筆記

　　jQuery一直沒系統的學，只知道是js庫，封裝了好多js函數，方便了開發。之前作過一個原生的圖片網站瀑布流效果，超級麻煩，此次用了jQuery方法，瞬間代碼濃縮了，只有56行js代碼。神奇的讓我來把其中的幾個函數具體記錄一下。

　　首先，在WebStorm中新建一個工程，導入jquery庫和幾張img放在img文件夾下，新建html和css文件，用來搭建基本的網頁結構。咱們設定圖片的寬度固定，高度不定，絕對定位，左浮動。這裏就不細說了。咱們主要講jquery部分的知識。

　　這裏咱們講一下咱們要實現的效果，瀑布流效果就是視覺表現爲良莠不齊的多欄佈局，隨着頁面滾動條向下滾動，這種佈局還會不斷加載數據並附加至當前尾部。除第一行元素外，其餘的元素要按照以前的排列中高度最低的下面。一次循環。當屏幕滾動的時候，判斷加載條件，動態加載。

　　開始吧。

　　（1）HTML文檔總體加載，監聽window的load事件.

$(document).ready(function(){
    $(window).on("load",function(){

    };
};

　　(2).判斷圖片的位置。即當圖片多於一行時，剩下的圖片應該擺放在哪裏。

function imgLocation(){ //用jquery獲取全部的box
    var box = $(".box"); //box的寬度
    var boxWidth = box.eq(0).width(); //每行共有幾個box
    var num = Math.floor($(window).width()/boxWidth);
    //存放box的boxHeight
    var boxArr = []; //each方法遍歷box，當只有一行的時候記錄boxHeight，多於一行則找出minBoxHeight，並設置樣式。
    box.each(function(index,value){ var boxHeight = box.eq(index).height(); if(index<num){ boxArr[index] = boxHeight; }else{ var minBoxHeight = Math.min.apply(null,boxArr); var minBoxIndex = $.inArray(minBoxHeight,boxArr); $(value).css({ "position":"absolute", "top":minBoxHeight, "left":box.eq(minBoxIndex).position().left }); //動態變化minBoxIndex
            boxArr[minBoxIndex] += box.eq(index).height(); } }); }

　　(3).監聽屏幕的滾動事件。當屏幕的高度大於最後一張圖片的高度的1/2時，加載資源。

function scrollside(){ var box = $(".box"); var lastboxHeight = box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
    var documentHeight=$(document).width(); var scrollHeight=$(window).scrollTop(); return (lastboxHeight<scrollHeight+documentHeight)?true:false; }

　　(4).監聽屏幕的函數寫好之後，咱們先在load加載事件中本地寫一個JSON數據，傳遞圖片資源。

　　　　即：var dataImg={"data":[{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"},{"src":"5.jpg"}]};

　　(5).實現window的onscroll事件。當知足(3)中滾動的條件時，咱們動態的建立box，而後appendTo相應的父容器中

window.onscroll=function(){ if(scrollside()){ //each()方法遍歷數據加載進來
                $.each(dataImg.data,function(index,value){ var box = $("<div>").addClass("box").appendTo($("#container")); var content = $("<div>").addClass("content").appendTo(box); console.log("./img/"+$(value).attr("src")); $("<img>").attr("src","./img/"+$(value).attr("src")).appendTo(content); }); imgLocation(); } };

　　至此，用jQuery實現照片瀑布流的方法已經實現了。在整個過程當中，我主要學到了

• 　　each()方法遍歷數組，
•      eq()
• 　　Math.min.apply()找出數組中最小數，
• 　　jquery.inarray(value,array) 肯定第一個參數在數組中的位置，
• 　　$(value).css用jquery設置css樣式，
• 　　動態添加HTML文檔節點，並從JSON數據中獲取相應的屬性。

工程文件放在網盤了，朋友有須要的話能夠去下載。jquery實現瀑布流效果。連接: http://pan.baidu.com/s/1dEEmr5n 密碼: cjic