jQuery實現(xiàn)動態(tài)加載瀑布流

更新時間：2020年09月01日 08:31:36 作者：GGCoder

這篇文章主要為大家詳細介紹了jQuery實現(xiàn)動態(tài)加載瀑布流，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

jquery實現(xiàn)瀑布流，供大家參考，具體內(nèi)容如下

案例分析

首先，它的每個圖片是等寬的
其次，除第一排正常顯示其余的圖片都會顯示在上一排中高度最小的那個圖片的下面
最后，就是根據(jù)最矮圖片所在位置的寬高來，決定絕對定位設(shè)置圖片顯示的位置

效果圖

實現(xiàn)步驟

html結(jié)構(gòu)

<div class="container">
 <div class="box">
 <div class="content"><img src="./image/1.jpg" alt=""></div>
 </div>
 <div class="box">
 <div class="content"><img src="./image/2.jpg" alt=""></div>
 </div>
 <div class="box">
 <div class="content"><img src="./image/3.jpg" alt=""></div>
 </div>

 </div>
</div>

css樣式

具體就是對每個boxdiv浮動并設(shè)置樣式

* {
 padding: 0;
 margin: 0;
 }

 .box {
 position: relative;
 float: left;
 margin: 10px;
 }

 .content {
 padding: 15px;
 border: 1px solid #ccc;
 box-shadow: 0 0 5px #ccc;
 border-radius: 10px;
 }

 .content img {
 width: 200px;
 height: auto;
 }

js(jquery)代碼

主要是根據(jù)一排中高度最小的寬度個高度進行絕對定位的設(shè)置

<script>
 $(function () {
 //jQuery代碼
 imgLocation()
 
 function imgLocation() {
 var box = $('.box')
 var num = Math.floor($(window).width() / box.eq(0).width())
 var boxHeights = []
 box.each(function (index, value) {
 var boxHeight = box.eq(index).height()
 if (index < num) {
 boxHeights[index] = boxHeight
 } else {
 var minHeight = Math.min.apply(null, boxHeights)
 var minIndex = $.inArray(minHeight, boxHeights)
 $(value).css({
 'position': 'absolute',
 'top': minHeight,
 'left': box.eq(minIndex).position().left
 });
 boxHeights[minIndex] += box.eq(index).height()
 }
 })
 }
 })
</script>

根據(jù)鼠標的滾動動態(tài)的加載圖片

案例分析

這里的動態(tài)是主要是模仿動態(tài)加載數(shù)據(jù)(偽動態(tài))

首先，根據(jù)鼠標滾動的大小和界面的高度判斷是否要動態(tài)加載
其次，就是訪問數(shù)據(jù)，并動態(tài)形成jquery數(shù)據(jù)類型
最后，把生成的數(shù)據(jù)追加的.container中進行顯示

效果圖

實現(xiàn)步驟

html和css的代碼都一樣這里就不重復(fù)寫了
js代碼

主要是判斷什么時候新增圖片數(shù)據(jù)，新增后插入到模板就行了

其中的dataImg就是模仿的假數(shù)據(jù)

var dataImg = { 'data': [{ 'src': '1.jpg' }, { 'src': '2.jpg' }, { 'src': '3.jpg' }, { 'src': '4.jpg' }] }
 window.onscroll = function () {
 if (scrollside()) {
 $.each(dataImg.data, function (index, value) {
 var html = `<div class="box">
 <div class="content"><img src="./image/${value.src}" alt=""></div>
 </div>`
 $(html).appendTo($('.container'))
 })
 imgLocation()
 }
 }
 function scrollside() {
 var box = $('.box')
 var lastboxHeight = box.last().get(0).offsetTop
 var documentHeight = document.body.scrollHeight + 130
 var scrollHeight = $(document).scrollTop()
 console.log(lastboxHeight, scrollHeight, documentHeight)
 return (lastboxHeight < scrollHeight + documentHeight) ? true : false
 }


oxHeight, scrollHeight, documentHeight)
 return (lastboxHeight < scrollHeight + documentHeight) ? true : false
 }

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

您可能感興趣的文章: