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

創(chuàng)新互聯(lián)是網(wǎng)站建設(shè)技術(shù)企業(yè)，為成都企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，網(wǎng)站設(shè)計(jì)，網(wǎng)站制作，網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗(yàn)和眾多成功案例，為您定制適合企業(yè)的網(wǎng)站。十載品質(zhì)，值得信賴！

1、html+css+js代碼：

2、思路分析

首先做出靜態(tài)布局來(lái)。先計(jì)算出一行放多少個(gè)元素，然后再讓下一個(gè)元素放入第二行中，然后我們要計(jì)算出，放入第二行的第一個(gè)元素要放在哪個(gè)位置，故我們應(yīng)該有一個(gè)數(shù)組用來(lái)存放每列的高度，當(dāng)靜態(tài)的這些元素都放進(jìn)去之后，可以更加完善，比如當(dāng)拖動(dòng)滾動(dòng)條的時(shí)候，頁(yè)面刷新，更多元素填充，這里要用到j(luò)son。

3、實(shí)現(xiàn)過(guò)程

1.初始的靜態(tài)頁(yè)面通過(guò)css來(lái)實(shí)現(xiàn)

2.靜態(tài)的瀑布流布局，先要獲取到父級(jí)對(duì)象main下面的所有類為pin的元素，然后計(jì)算一行中有幾個(gè)塊，此時(shí)用當(dāng)前屏幕的寬度去除一個(gè)塊的寬度，得到num。然后用一個(gè)數(shù)組，用來(lái)存儲(chǔ)一行中每列的高度，通過(guò)循環(huán)，找出最小的高度，以及最小高度的下標(biāo)值，然后用絕對(duì)定位設(shè)置高度。

3.當(dāng)鼠標(biāo)滾動(dòng)的時(shí)候，通過(guò)一個(gè)函數(shù)來(lái)檢查是否需要加載新的圖片元素，這里用一個(gè)變量lastpinh計(jì)算出最后一個(gè)元素距離頂部的高度和自身高度的一半之和，當(dāng)頁(yè)面的高度與滾動(dòng)出去的高度之和大于最后一個(gè)的高度時(shí)，觸發(fā)事件，添加新的元素，以及調(diào)整布局。

4、需要掌握知識(shí)點(diǎn)：

json的數(shù)據(jù)存儲(chǔ)

window.onscroll();
document.createElement();
obj.className;
obj.appendChild(obj1);
obj.offsetWidth/offsetHeight/offsetLeft/offsetTop;
document.documentElement.clientWidth/clientHeight;
obj.style.cssText
Math.min.apply();
Math.floor();
obj.push();
document.documentElement.scrollTop
document.body.scrollTop;

注：這些都是我所不熟練的知識(shí)點(diǎn)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。