何為瀑布流:
瀑布流,又稱瀑布流式布局。是比較流行的一種網站頁面布局,視覺表現為參差不齊的多欄布局,隨着頁面滾動條向下滾動,這種布局還會不斷加載數據塊並附加至當前尾部。最早采用此布局的網站是Pinterest,逐漸在國內流行開來。國內大多數清新站基本為這類風格。
瀑布流的應用:
瀑布流對於圖片的展現,是高效而具有吸引力的,用戶一眼掃過的快速閱讀模式可以在短時間內獲得更多的信息量,而瀑布流里懶加載模式又避免了用戶鼠標點擊的翻頁操作,瀑布流的主要特性便是錯落有致,定寬而不定高的設計讓頁面區別於傳統的矩陣式圖片布局模式,巧妙的利用視覺層級,視線的任意流動又緩解了視覺疲勞,同時給人以不拘一格的感覺,切中年輕一族的個性化心理。[1] 國內類Pinterest網站也如雨后春筍般出現,已知網站超40家,類Pinterest網站有四種,一是電商導購,如想去網、蘑菇街和美麗說、好享說、依托於淘寶平台;二是興趣圖譜分享,如知美、花瓣等;三是在細分垂直領域,如針對吃貨的零食控、針對家居行業的他部落等。四是服裝款式設計資訊平台如看潮網等等。
優
應用案例:
通用類:豆瓣市集,花瓣網,我喜歡,讀圖知天下 美女圖片:圖麗網 時尚資訊類:看潮網 時尚購物類:蘑菇街,美麗說,人人逛街,卡當網
品牌推廣類:凡客達人 家居o2o類:新巢網小貓家 微博社交類: 都愛看 搞笑圖片類:道趣兒 藝術收藏類:微藝術 潮流圖文分享:荷都分享網
實現效果
HTML代碼:
<!DOCTYPE html>
<html>
<head>
<title>瀑布流</title>
<meta charset="utf-8">
<script type="text/javascript" src="../jquery/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="waterFall.css">
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="#" alt="img1" style="background-color: #03c03c;" width="200" height="300">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img2" style="background-color: #03c03c;" width="200" height="400">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img3" style="background-color: #03c03c;" width="200" height="350">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img4" style="background-color: #03c03c;" width="200" height="200">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img5" style="background-color: #03c03c;" width="200" height="400">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img6" style="background-color: #03c03c;" width="200" height="100">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img7" style="background-color: #03c03c;" width="200" height="330">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img8" style="background-color: #03c03c;" width="200" height="200">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img9" style="background-color: #03c03c;" width="200" height="450">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img10" style="background-color: #03c03c;" width="200" height="500">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img11" style="background-color: #03c03c;" width="200" height="200">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img12" style="background-color: #03c03c;" width="200" height="100">
</div>
</div>
<div class="pin">
<div class="box">
<img src="#" alt="img13" style="background-color: #03c03c;" width="200" height="300">
</div>
</div>
</div>
<script type="text/javascript" src="waterFall.js"></script>
</body>
</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 = $("<div>").addClass('pin').appendTo('#main');
var box = $("<div>").addClass('box').appendTo(pin);
var img = $("<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(); //新高度
}
});
}
本文轉載於:猿2048▷https://www.mk2048.com/blog/blog.php?id=ha1iiibjacb