本文實例為大家分享了js瀑布流佈局學習資料，供大家參考，具體內容如下
特點：等寬不等高。
實作方式：Javascript/Jquery/CSS3多欄佈局。
範例網站：花瓣網-->分類
一、JS實作瀑布流
index.html:頁面結構
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>瀑布流布局</title>
<link rel="stylesheet" href="styles/layout.css">
</head>
<body>
<div id="main">
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/0.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/1.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/2.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/3.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/4.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/5.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/6.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/7.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/8.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/9.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/10.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/11.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/12.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/13.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/14.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/15.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/16.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/17.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/18.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/19.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/20.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/21.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/22.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/23.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/24.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/25.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/26.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/27.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/28.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/29.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/30.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/31.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/32.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/33.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/34.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/35.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/36.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/37.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/38.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/39.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/40.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/41.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/42.jpg" class="lazy" alt=""></div></div>
<div><div><img src="/static/imghwm/default1.png" data-src="../waterFall/pic/43.jpg" class="lazy" alt=""></div></div>
</div>
<script src="scripts/waterfall.js"></script>
</body>
</html>layout.css:頁面元素樣式
*{
pdding:0;
margin:0;
}
div#main{
position: relative;
}
div.box{
padding:15px 0 0 15px;
float: left;
}
div.pic{
padding:10px;
border:1px solid #ccc;
border-radius:5px;
box-shadow: 0 0 5px #ccc;
}
.pic img{
height:auto;
width:165px;
} window.onload=function(){
waterFall('main','box');
//模拟后台相应数据json
var dataInt={
"data":
[
{"src":"0.jpg"},
{"src":"1.jpg"},
{"src":"2.jpg"},
{"src":"3.jpg"},
{"src":"4.jpg"},
{"src":"5.jpg"},
{"src":"6.jpg"}
]
}
window.onscroll=function(){
if(checkScrollSlide){
//将数据块渲染到当前页面的尾部
var oParent=document.getElementById("main");
for(var i=0;i<dataInt.data.length;i++){
var oBox=document.createElement("div");
oBox.className="box";
oParent.appendChild(oBox);
var oPic=document.createElement("div");
oPic.className="pic";
oBox.appendChild(oPic);
var img=document.createElement("img");
img.setAttribute("src",dataInt.data[i]);
img.src="pic/"+dataInt.data[i].src;
oPic.appendChild(img);
}
dataInt=null;//清空数据块，防止无限加载
waterFall('main','box');//对页面新元素进行布局渲染
}
}
}
function waterFall(parent,box){
//将main下的class为box的所有元素取出来
var oParent=document.getElementById(parent);
var oBoxs=getByClass(oParent,box);
console.log(oBoxs.length);
//计算整个页面显示的列数（页面宽/box宽）
var oBoxW=oBoxs[0].offsetWidth;
// console.log(oBoxW);
var cols=Math.floor(document.documentElement.clientWidth/oBoxW);
// console.log(cols);
//设置main的宽
oParent.style.cssText="width:"+oBoxW*cols+"px;margin:0 auto;"
var hArr=[];//存放每列高度的数组
for(var i=0;i<oBoxs.length;i++){
if(i<cols){
hArr.push(oBoxs[i].offsetHeight);
}else{
var minH=Math.min.apply(null,hArr);//获取当前数组最小高度值
// console.log(minH);
var index=getMinhIndex(hArr,minH);//获取数组最小高度的索引
//console.log(index);
oBoxs[i].style.position="absolute";//将之后的图片依次绝对定位
oBoxs[i].style.top=minH+"px";
oBoxs[i].style.left=index*oBoxW+"px";//计算新图片所在的位置并赋值
hArr[index]+=oBoxs[i].offsetHeight;//变化数组列的高度值，因为加上了一张图片
}
//console.log(hArr);
}
}
//根据class获取元素
function getByClass(parent,clsName){
var boxArr=new Array(),//用来存储获取到的所有class为box的元素
oElements=parent.getElementsByTagName("*");
for(var i=0;i<oElements.length;i++){
if(oElements[i].className==clsName){
boxArr.push(oElements[i]);
}
}
return boxArr;
}
function getMinhIndex(arr,val){
for(var i=0;i<arr.length;i++){
if(arr[i]==val){
return i;
}
}
}
//检测是否具备滚动条加载数据块条件
function checkScrollSlide(){
var oParent=document.getElementById("main");
var oBoxs=getByClass(oParent,"box");
var lastBoxH=oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
var scrollTop=document.body.scrollTop||document.documentElement.scrollTop;//混杂模式和标准模式下的scrollTop获取
//console.log(scrollTop);
var height=document.body.clientHeight||document.documentElement.clientHeight;//混杂模式和标准模式下的浏览器窗口高度获取
return (lastBoxH<scrollTop+height)?true:false;//检测最后一个box高度是否小于滚动高度+窗口高度，返回布尔值
}三、CSS多欄佈局 $( window ).on( "load", function(){
waterfall('main','pin');
var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
window.onscroll=function(){
if(checkscrollside()){
$.each( dataInt.data, function( index, value ){
var $oPin = $('<div>').addClass('pin').appendTo( $( "#main" ) );
var $oBox = $('<div>').addClass('box').appendTo( $oPin );
$('<img alt="深入學習js瀑布流佈局" >').attr('src','./images/' + $( value).attr( 'src') ).appendTo($oBox);
});
waterfall();
};
}
});
/*
parend 父级id
pin 元素id
*/
function waterfall(parent,pin){
var $aPin = $( "#main>div" );
var iPinW = $aPin.eq( 0 ).width();// 一个块框pin的宽
var num = Math.floor( $( window ).width() / iPinW );//每行中能容纳的pin个数【窗口宽度除以一个块框宽度】
//oParent.style.cssText='width:'+iPinW*num+'px;ma rgin:0 auto;';//设置父级居中样式：定宽+自动水平外边距
$( "#main" ).css({
'width:' : iPinW * num,
'margin': '0 auto'
});
var pinHArr=[];//用于存储 每列中的所有块框相加的高度。
$aPin.each( function( index, value ){
var pinH = $aPin.eq( index ).height();
if( index < num ){
pinHArr[ index ] = pinH; //第一行中的num个块框pin 先添加进数组pinHArr
}else{
var minH = Math.min.apply( null, pinHArr );//数组pinHArr中的最小值minH
var minHIndex = $.inArray( minH, pinHArr );
$( value ).css({
'position': 'absolute',
'top': minH + 15,
'left': $aPin.eq( minHIndex ).position().left
});
//数组 最小高元素的高 + 添加上的aPin[i]块框高
pinHArr[ minHIndex ] += $aPin.eq( index ).height() + 15;//更新添加了块框后的列高
}
});
}
function checkscrollside(){
var $aPin = $( "#main>div" );
var lastPinH = $aPin.last().get(0).offsetTop + Math.floor($aPin.last().height()/2);//创建【触发添加块框函数waterfall()】的高度：最后一个块框的距离网页顶部+自身高的一半(实现未滚到底就开始加载)
var scrollTop = $( window ).scrollTop()//注意解决兼容性
var documentH = $( document ).height();//页面高度
return (lastPinH < scrollTop + documentH ) ? true : false;//到达指定高度后 返回true，触发waterfall()函数
}【css3和js實作方法比較】--css3方式--
1：不需要計算，瀏覽器自動計算，只要設定1列寬，效能高2 :列寬隨著瀏覽器寬口大小改變，使用者體驗不好；
3：圖片排序依照垂直順序排列，打亂圖片顯示順序
4.圖片載入還是需要js
--js方式--
js實現的瀑布流不會有上面的缺點，但是性能相對要差！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AMJavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。
使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。 首先，什麼是多租戶SaaS應用程序？ 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務
如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫
JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AMJavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。
JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AMJavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。
神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AMJavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。
Python還是JavaScript更好？Apr 06, 2025 am 12:14 AMPython更适合数据科学和机器学习，JavaScript更适合前端和全栈开发。1.Python以简洁语法和丰富库生态著称，适用于数据分析和Web开发。2.JavaScript是前端开发核心，Node.js支持服务器端编程，适用于全栈开发。
如何安裝JavaScript？Apr 05, 2025 am 12:16 AMJavaScript不需要安裝，因為它已內置於現代瀏覽器中。你只需文本編輯器和瀏覽器即可開始使用。 1)在瀏覽器環境中，通過標籤嵌入HTML文件中運行。 2)在Node.js環境中，下載並安裝Node.js後，通過命令行運行JavaScript文件。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前By尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前ByDDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
3 週前By尊渡假赌尊渡假赌尊渡假赌
熱工具
Atom編輯器mac版下載
最受歡迎的的開源編輯器
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合，這些清單在安全評估過程中經常使用，而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表，幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上，他就可以存取所需的每種類型的清單。
