欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery實(shí)現(xiàn)簡(jiǎn)單瀑布流布局

 更新時(shí)間：2022年07月22日 16:17:58   作者：aiguangyuan  
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)簡(jiǎn)單瀑布流布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JQuery實(shí)現(xiàn)簡(jiǎn)單瀑布流布局的具體代碼，供大家參考，具體內(nèi)容如下

分享一個(gè)基于JQuery實(shí)現(xiàn)的瀑布流布局，效果如下： 

實(shí)現(xiàn)代碼如下，歡迎大家復(fù)制粘貼。

<!DOCTYPE html>
<html>
?
<head>
? ? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
? ? <title>基于JQuery實(shí)現(xiàn)的瀑布流布局案例</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 () {
? ? ? ? ? ? //調(diào)用瀑布流函數(shù)
? ? ? ? ? ? waterfall('main', 'pin');
? ? ? ? ? ? //模擬json數(shù)據(jù)
? ? ? ? ? ? var dataInt = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] };
? ? ? ? ? ? //滾動(dòng)加載
? ? ? ? ? ? window.onscroll = function () {
? ? ? ? ? ? ? ? //判斷是否具備加載剩余圖片
? ? ? ? ? ? ? ? if (checkscrollside()) {
?
? ? ? ? ? ? ? ? ? ? //遍歷模擬的json數(shù)據(jù)中dataInt.data值,得出下標(biāo)和值
? ? ? ? ? ? ? ? ? ? $.each(dataInt.data, function (index, value) {
?
? ? ? ? ? ? ? ? ? ? ? ? //創(chuàng)建div添加class為pin，添加到ID為main的div中
? ? ? ? ? ? ? ? ? ? ? ? var $oPin = $('<div>').addClass('pin').appendTo($("#main"));
?
? ? ? ? ? ? ? ? ? ? ? ? //創(chuàng)建div添加class為box，添加到class為pin的div中
? ? ? ? ? ? ? ? ? ? ? ? var $oBox = $('<div>').addClass('box').appendTo($oPin);
?
? ? ? ? ? ? ? ? ? ? ? ? //創(chuàng)建圖片添加src屬性添加到class為box的div中
? ? ? ? ? ? ? ? ? ? ? ? $('<img>').attr('src', './images/' + $(value).attr('src')).appendTo($oBox);
? ? ? ? ? ? ? ? ? ? });
?
? ? ? ? ? ? ? ? ? ? //調(diào)用瀑布流功能函數(shù)，讓加載的圖片按規(guī)則排列
? ? ? ? ? ? ? ? ? ? waterfall();
? ? ? ? ? ? ? ? };
? ? ? ? ? ? }
? ? ? ? });
?
? ? ? ? //瀑布流功能函數(shù)
? ? ? ? function waterfall(parent, pin) {
?
? ? ? ? ? ? //獲取所有圖片容器（含內(nèi)邊距)
? ? ? ? ? ? var $aPin = $("#main>div");
?
? ? ? ? ? ? //獲取其中一列的寬度 (outerWidth()可以獲取padding值,width()無(wú)法獲取)
? ? ? ? ? ? var iPinW = $aPin.eq(0).width();
?
? ? ? ? ? ? //通過(guò)整個(gè)窗口的寬度除以單列的寬度得出多少列,并向下取整
? ? ? ? ? ? var num = Math.floor($(window).width() / iPinW);
?
? ? ? ? ? ? //設(shè)置圖片容器的寬度，并居中顯示
? ? ? ? ? ? $("#main").css({
? ? ? ? ? ? ? ? 'width:': iPinW * num,
? ? ? ? ? ? ? ? 'margin': '0 auto'
? ? ? ? ? ? });
?
? ? ? ? ? ? //存儲(chǔ)每一行當(dāng)中列的高度
? ? ? ? ? ? var pinHArr = [];
?
? ? ? ? ? ? //遍歷所有的圖片容器，得出下標(biāo)和值
? ? ? ? ? ? $aPin.each(function (index, value) {
?
? ? ? ? ? ? ? ? //將當(dāng)前圖片的高度存在pinH中
? ? ? ? ? ? ? ? var pinH = $aPin.eq(index).height();
?
? ? ? ? ? ? ? ? //如果圖片容器的下標(biāo)小于當(dāng)前的列數(shù),即只有一行
? ? ? ? ? ? ? ? if (index < num) {
?
? ? ? ? ? ? ? ? ? ? //將第一行每一張圖片的高度存在數(shù)組中
? ? ? ? ? ? ? ? ? ? pinHArr[index] = pinH;
?
? ? ? ? ? ? ? ? } else {
?
? ? ? ? ? ? ? ? ? ? //通過(guò)Math.min.apply求出數(shù)組pinHArr（第一行）中高度的最小值?
? ? ? ? ? ? ? ? ? ? var minH = Math.min.apply(null, pinHArr);
?
? ? ? ? ? ? ? ? ? ? //通過(guò)inArray(判斷的值,所在數(shù)組)得出高度最小那張圖片的下標(biāo)
? ? ? ? ? ? ? ? ? ? var minHIndex = $.inArray(minH, pinHArr);
?
? ? ? ? ? ? ? ? ? ? //設(shè)置剩余圖片的樣式,value為Dom對(duì)象，要將其轉(zhuǎn)換為JQuery對(duì)象
? ? ? ? ? ? ? ? ? ? $(value).css({
? ? ? ? ? ? ? ? ? ? ? ? //絕對(duì)定位
? ? ? ? ? ? ? ? ? ? ? ? 'position': 'absolute',
? ? ? ? ? ? ? ? ? ? ? ? //top值?
? ? ? ? ? ? ? ? ? ? ? ? 'top': minH + 15,
? ? ? ? ? ? ? ? ? ? ? ? //left值為第一行中高度最小圖片的left值
? ? ? ? ? ? ? ? ? ? ? ? 'left': $aPin.eq(minHIndex).position().left
? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? //設(shè)置每一行中高度最小那一列的高度等于該列剩余圖片高度的累加
? ? ? ? ? ? ? ? ? ? pinHArr[minHIndex] += $aPin.eq(index).height() + 15;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? });
? ? ? ? }
?
? ? ? ? //封裝函數(shù)，檢驗(yàn)是否需要加載圖片
? ? ? ? function checkscrollside() {
?
? ? ? ? ? ? //獲取所有圖片容器（含內(nèi)邊距)
? ? ? ? ? ? var $aPin = $("#main>div");
?
? ? ? ? ? ? //將最后一張圖片的top值加上該圖片自身高度的一半存為變量lastPinH中
? ? ? ? ? ? //注意last()獲得的是一個(gè)數(shù)組,通過(guò)get(0)獲得第一個(gè)
? ? ? ? ? ? var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height() / 2);
?
? ? ? ? ? ? //獲取頁(yè)面滾動(dòng)的距離
? ? ? ? ? ? var scrollTop = $(window).scrollTop();
?
? ? ? ? ? ? //獲取屏幕高度
? ? ? ? ? ? var documentH = $(document).height();
?
? ? ? ? ? ? //當(dāng)lastPinH小于頁(yè)面滾動(dòng)距離與屏幕高度之和時(shí),返回true，具備加載條件，否則返回false，不具備
? ? ? ? ? ? return (lastPinH < scrollTop + documentH) ? true : false;
? ? ? ? }
?
? ? </script>
</body>
?
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論