jQuery實(shí)現(xiàn)動(dòng)態(tài)加載瀑布流

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

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

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

案例分析

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

效果圖

實(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樣式

具體就是對(duì)每個(gè)boxdiv浮動(dòng)并設(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ù)一排中高度最小的寬度個(gè)高度進(jìn)行絕對(duì)定位的設(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ù)鼠標(biāo)的滾動(dòng)動(dòng)態(tài)的加載圖片

案例分析

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

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

效果圖

實(shí)現(xiàn)步驟

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

主要是判斷什么時(shí)候新增圖片數(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
 }

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

您可能感興趣的文章: