溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享的是如何使用JQuery實現簡單瀑布流布局，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。
分享一個基于JQuery實現的瀑布流布局，效果如下：
實現代碼如下，歡迎大家復制粘貼。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>基于JQuery實現的瀑布流布局案例</title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#main {
position: relative;
}
.pin {
padding: 15px 0 0 15px;
float: left;
}
.box {
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 0 6px #ccc;
border-radius: 5px;
}
.box img {
width: 162px;
height: auto;
}
</style>
</head>
<body>
<div id="main">
<div class="pin">
<div class="box">
<img src="./images/1.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/2.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/3.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/4.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/5.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/6.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/7.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/8.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/9.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/10.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/11.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/12.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/13.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/14.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/15.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/16.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/17.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/18.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/19.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/20.jpg" />
</div>
</div>
<div class="pin">
<div class="box">
<img src="./images/21.jpg" />
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js" />
</script>
<script>
$(window).on("load", function () {
//調用瀑布流函數
waterfall('main', 'pin');
//模擬json數據
var dataInt = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] };
//滾動加載
window.onscroll = function () {
//判斷是否具備加載剩余圖片
if (checkscrollside()) {
//遍歷模擬的json數據中dataInt.data值,得出下標和值
$.each(dataInt.data, function (index, value) {
//創建div添加class為pin，添加到ID為main的div中
var $oPin = $('<div>').addClass('pin').appendTo($("#main"));
//創建div添加class為box，添加到class為pin的div中
var $oBox = $('<div>').addClass('box').appendTo($oPin);
//創建圖片添加src屬性添加到class為box的div中
$('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($oBox);
});
//調用瀑布流功能函數，讓加載的圖片按規則排列
waterfall();
};
}
});
//瀑布流功能函數
function waterfall(parent, pin) {
//獲取所有圖片容器（含內邊距)
var $aPin = $("#main>div");
//獲取其中一列的寬度 (outerWidth()可以獲取padding值,width()無法獲取)
var iPinW = $aPin.eq(0).width();
//通過整個窗口的寬度除以單列的寬度得出多少列,并向下取整
var num = Math.floor($(window).width() / iPinW);
//設置圖片容器的寬度，并居中顯示
$("#main").css({
'width:': iPinW * num,
'margin': '0 auto'
});
//存儲每一行當中列的高度
var pinHArr = [];
//遍歷所有的圖片容器，得出下標和值
$aPin.each(function (index, value) {
//將當前圖片的高度存在pinH中
var pinH = $aPin.eq(index).height();
//如果圖片容器的下標小于當前的列數,即只有一行
if (index < num) {
//將第一行每一張圖片的高度存在數組中
pinHArr[index] = pinH;
} else {
//通過Math.min.apply求出數組pinHArr（第一行）中高度的最小值
var minH = Math.min.apply(null, pinHArr);
//通過inArray(判斷的值,所在數組)得出高度最小那張圖片的下標
var minHIndex = $.inArray(minH, pinHArr);
//設置剩余圖片的樣式,value為Dom對象，要將其轉換為JQuery對象
$(value).css({
//絕對定位
'position': 'absolute',
//top值
'top': minH + 15,
//left值為第一行中高度最小圖片的left值
'left': $aPin.eq(minHIndex).position().left
});
//設置每一行中高度最小那一列的高度等于該列剩余圖片高度的累加
pinHArr[minHIndex] += $aPin.eq(index).height() + 15;
}
});
}
//封裝函數，檢驗是否需要加載圖片
function checkscrollside() {
//獲取所有圖片容器（含內邊距)
var $aPin = $("#main>div");
//將最后一張圖片的top值加上該圖片自身高度的一半存為變量lastPinH中
//注意last()獲得的是一個數組,通過get(0)獲得第一個
var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height() / 2);
//獲取頁面滾動的距離
var scrollTop = $(window).scrollTop();
//獲取屏幕高度
var documentH = $(document).height();
//當lastPinH小于頁面滾動距離與屏幕高度之和時,返回true，具備加載條件，否則返回false，不具備
return (lastPinH < scrollTop + documentH) ? true : false;
}
</script>
</body>
</html>關于如何使用JQuery實現簡單瀑布流布局就分享到這里了，希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
