jQuery實現瀑布流效果

pcChao 發布于2019-08-29 13:00 / 967人閱讀

摘要：何為瀑布流瀑布流，又稱瀑布流式布局。最早采用此布局的網站是，逐漸在國內流行開來。四是服裝款式設計資訊平臺如看潮網等等。

何為瀑布流：

　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格。

瀑布流的應用：

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

應用案例：

通用類：豆瓣市集，花瓣網，我喜歡，讀圖知天下美女圖片：圖麗網時尚資訊類：看潮網時尚購物類：蘑菇街，美麗說，人人逛街，卡當網
品牌推廣類：凡客達人家居o2o類：新巢網小貓家微博社交類：都愛看搞笑圖片類：道趣兒藝術收藏類：微藝術潮流圖文分享：荷都分享網

實現效果

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();          //獲取當前窗口的高度
    var scrollHeight = $(window).scrollTop();           //獲取滾動的距離
    return (lastImgHeight < documentHeight + scrollHeight) ? true:false;
}
 
//圖片位置擺放
function imgLocation(){
    var box = $(".pin");                                //返回一個數值
    var boxWidth  = box.eq(0).width();                  //每張圖片的寬度
    var num = Math.floor($(window).width()/boxWidth);   //一行能放的圖片的個數
    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(); //新高度
        }
    });
}

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112298.html

jQuery實現瀑布流效果

摘要：何為瀑布流瀑布流，又稱瀑布流式布局。最早采用此布局的網站是，逐漸在國內流行開來。四是服裝款式設計資訊平臺如看潮網等等。何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格。 ...

mumumu 2019-08-20 18:13 評論0 收藏0
jQuery實現瀑布流效果

摘要：何為瀑布流瀑布流，又稱瀑布流式布局。最早采用此布局的網站是，逐漸在國內流行開來。四是服裝款式設計資訊平臺如看潮網等等。何為瀑布流：　　瀑布流，又稱瀑布流式布局。是比較流行的一種網站頁面布局，視覺表現為參差不齊的多欄布局，隨著頁面滾動條向下滾動，這種布局還會不斷加載數據塊并附加至當前尾部。最早采用此布局的網站是Pinterest，逐漸在國內流行開來。國內大多數清新站基本為這類風格。 ...

mgckid 2019-08-01 17:14 評論0 收藏0
懶加載、瀑布流和LightBox實現圖片搜索效果

摘要：無非就是獲取用戶輸入的獲取圖片信息組裝填充頁面數據瀑布流布局處理在頁面滾動時判斷最后一張圖片是否可見，如果是則重復以上內容查看源碼開始做一個小項目，算是對js和jQuery的一次練習吧。圖片資源來自這個網站（上面有很多高清圖片關鍵還是免費下載的）：https://unsplash.com/ 項目具體效果可以點這里：https://bjw1234.github.io/ima......

rainyang 2019-08-26 11:51 評論0 收藏0
瀑布流插件Masonry的配置和使用

摘要：是最流行的瀑布流插件之一，配置簡單，功能強大，在上收獲了。如果你想使用瀑布流提升網站體驗，將是不錯的選擇。瀑布流，又稱瀑布流式布局。需要注意的是，如果你需要加載圖片，不會在圖片加載完后重新布局，這可能會影響你的布局效果，建議配合使用插件。 Masonry是最流行的瀑布流插件之一，配置簡單，功能強大，在Github上收獲了1w+ stars。如果你想使用瀑布流提升網站體驗，Masonry...

waterc 2019-08-22 10:42 評論0 收藏0
淺談瀑布流

摘要：瀑布流又稱瀑布流式布局，是比較流行的一種網站頁面布局方式。那么規則是什么呢下面通過圖解來分析一下瀑布流的算法。看懂這個圖示應該就能理解了瀑布流的原理算法。瀑布流又稱瀑布流式布局，是比較流行的一種網站頁面布局方式。視覺表現為參差不齊的多欄布局，最早采用此布局的是網站是 Pinterest，后逐漸在國內流行。瀑布流布局效果即多行等寬元素排列，后面的元素依次添加到其后，等寬不等高，...

番茄西紅柿 2019-04-23 13:27 評論0 收藏0