<em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011
2021-06-01 09:32:01
JQuery實現簡單瀑布流佈局
2022-07-22 22:01:34
本文範例為大家分享了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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。
相關文章
-
黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列
综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所
2021-06-01 09:31:42
-
吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！
除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让
2021-06-01 09:31:34
-
IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？
目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加
2021-06-01 09:31:24
-
有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊
开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的
2021-06-01 09:30:48
-
iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？
不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它
2021-06-01 09:30:45