jQuery實(shí)現(xiàn)瀑布流效果

pcChao 發(fā)布于2019-08-29 13:00 / 980人閱讀

摘要：何為瀑布流瀑布流，又稱(chēng)瀑布流式布局。最早采用此布局的網(wǎng)站是，逐漸在國(guó)內(nèi)流行開(kāi)來(lái)。四是服裝款式設(shè)計(jì)資訊平臺(tái)如看潮網(wǎng)等等。

何為瀑布流：

　　瀑布流，又稱(chēng)瀑布流式布局。是比較流行的一種網(wǎng)站頁(yè)面布局，視覺(jué)表現(xiàn)為參差不齊的多欄布局，隨著頁(yè)面滾動(dòng)條向下滾動(dòng)，這種布局還會(huì)不斷加載數(shù)據(jù)塊并附加至當(dāng)前尾部。最早采用此布局的網(wǎng)站是Pinterest，逐漸在國(guó)內(nèi)流行開(kāi)來(lái)。國(guó)內(nèi)大多數(shù)清新站基本為這類(lèi)風(fēng)格。

瀑布流的應(yīng)用：

　　瀑布流對(duì)于圖片的展現(xiàn)，是高效而具有吸引力的，用戶(hù)一眼掃過(guò)的快速閱讀模式可以在短時(shí)間內(nèi)獲得更多的信息量,而瀑布流里懶加載模式又避免了用戶(hù)鼠標(biāo)點(diǎn)擊的翻頁(yè)操作，瀑布流的主要特性便是錯(cuò)落有致，定寬而不定高的設(shè)計(jì)讓頁(yè)面區(qū)別于傳統(tǒng)的矩陣式圖片布局模式，巧妙的利用視覺(jué)層級(jí)，視線的任意流動(dòng)又緩解了視覺(jué)疲勞，同時(shí)給人以不拘一格的感覺(jué)，切中年輕一族的個(gè)性化心理。[1] 國(guó)內(nèi)類(lèi)Pinterest網(wǎng)站也如雨后春筍般出現(xiàn)，已知網(wǎng)站超40家，類(lèi)Pinterest網(wǎng)站有四種，一是電商導(dǎo)購(gòu)，如想去網(wǎng)、蘑菇街和美麗說(shuō)、好享說(shuō)、依托于淘寶平臺(tái);二是興趣圖譜分享，如知美、花瓣等;三是在細(xì)分垂直領(lǐng)域，如針對(duì)吃貨的零食控、針對(duì)家居行業(yè)的他部落等。四是服裝款式設(shè)計(jì)資訊平臺(tái)如看潮網(wǎng)等等。
優(yōu)

應(yīng)用案例：

通用類(lèi)：豆瓣市集，花瓣網(wǎng)，我喜歡，讀圖知天下 美女圖片：圖麗網(wǎng) 時(shí)尚資訊類(lèi)：看潮網(wǎng) 時(shí)尚購(gòu)物類(lèi)：蘑菇街，美麗說(shuō)，人人逛街，卡當(dāng)網(wǎng)
品牌推廣類(lèi)：凡客達(dá)人 家居o2o類(lèi)：新巢網(wǎng)小貓家 微博社交類(lèi)： 都愛(ài)看 搞笑圖片類(lèi)：道趣兒 藝術(shù)收藏類(lèi)：微藝術(shù) 潮流圖文分享：荷都分享網(wǎng)

實(shí)現(xiàn)效果

HTML代碼：




    瀑布流

CSS代碼：

*{
    margin: 0;
    padding: 0;
}
 
#main{
    position: relative;
}
 
.pin{
    padding: 15px 0 0 15px;
    float: left;
}
 
.box{
    padding: 5px;
    border-color: 1px solid #ccc;
    box-shadow: 0 0 6px #ccc;
    border-radius: 5px;
}

jQuery代碼：

$(document).ready(function(){
    $(window).on("load", function(){
        imgLocation();
        var dataImg = {"data":[{"src":"alt1.jpg"},{"src":"alt2.jpg"}]};                                            
        // 獲取最后一張圖片距離頂端的高度 + 它本身高度的一半
        $(window).scroll(function() {                      
            if(getSideHeight()){
                $.each(dataImg.data, function(index, value){
                    var pin = $("").addClass("pin").appendTo("#main");
                    var box = $("").addClass("box").appendTo(pin);
                    var img = $("").attr("src", "images/" + $(value).attr("src")).appendTo(box);
                });
                imgLocation();
            }
        });
 
    });
});
 
//獲取最后一張圖片的高度
function getSideHeight(){
    var box = $("pin");
    var lastImgHeight = (box.last().get(0)).offsetTop - Math.floor(box.last().height()/2);
    var documentHeight = $(document).height();          //獲取當(dāng)前窗口的高度
    var scrollHeight = $(window).scrollTop();           //獲取滾動(dòng)的距離
    return (lastImgHeight < documentHeight + scrollHeight) ? true:false;
}
 
//圖片位置擺放
function imgLocation(){
    var box = $(".pin");                                //返回一個(gè)數(shù)值
    var boxWidth  = box.eq(0).width();                  //每張圖片的寬度
    var num = Math.floor($(window).width()/boxWidth);   //一行能放的圖片的個(gè)數(shù)
    var numArr = [];
    box.each(function(index, value){
        var boxHeight = box.eq(index).height();         //獲取每張圖片的高度
        if(index < num){                                 //第一排
            numArr[index] = boxHeight;
        }
        else{                                           //第二排
            var minboxHeight = Math.min.apply(numArr,numArr);
            var minIndex = $.inArray(minboxHeight, numArr);
            $(value).css({
                position: "absolute",
                top: minboxHeight,
                left: box.eq(minIndex).position().left
            });
            numArr[minIndex] += box.eq(index).height(); //新高度
        }
    });
}