HTML5無限加載的瀑布流邊框圓角陰影

又一款網頁瀑布流效果，可以實現圖片的無限制加載。基於時下流行的HTML5技術編寫而成，演示頁面中一共調用了7張圖片，爲了演示方便，這裏讓其隨滾動條的滾動自動循環顯示，這樣大家更能清楚的看明白瀑布流的效果。除了實現瀑布流，還加入了CSS5的圖片修飾效果，比如圖片的圓角邊框、圖片陰影立體效果等，是學習瀑布流的好素材。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery無限加載瀑布流</title>
<style type="text/css">
/* 標籤重定義 */
body{padding:0;margin:0;background:#ddd url(/jscss/demoimg/201312/bg55.jpg) repeat;}
img{border:none;}
a{text-decoration:none;color:#444;}
a:hover{color:#999;}
#title{width:600px;margin:20px auto;text-align:center;}
/* 定義關鍵幀 */
@-webkit-keyframes shade{
	from{opacity:1;}
	15%{opacity:0.4;}
	to{opacity:1;}
}
@-moz-keyframes shade{
	from{opacity:1;}
	15%{opacity:0.4;}
	to{opacity:1;}
}
@-ms-keyframes shade{
	from{opacity:1;}
	15%{opacity:0.4;}
	to{opacity:1;}
}
@-o-keyframes shade{
	from{opacity:1;}
	15%{opacity:0.4;}
	to{opacity:1;}
}
@keyframes shade{
	from{opacity:1;}
	15%{opacity:0.4;}
	to{opacity:1;}
}
/* wrap */
#wrap{width:auto;height:auto;margin:0 auto;position:relative;}
#wrap .box{width:280px;height:auto;padding:10px;border:none;float:left;}
#wrap .box .info{width:280px;height:auto;border-radius:8px;box-shadow:0 0 11px #666;background:#fff;}
#wrap .box .info .pic{width:260px;height:auto;margin:0 auto;padding-top:10px;}
#wrap .box .info .pic:hover{
	-webkit-animation:shade 3s ease-in-out 1;
	-moz-animation:shade 3s ease-in-out 1;
	-ms-animation:shade 3s ease-in-out 1;
	-o-animation:shade 3s ease-in-out 1;
	animation:shade 3s ease-in-out 1;
}
#wrap .box .info .pic img{width:260px;border-radius:3px;}
#wrap .box .info .title{width:260px;height:40px;margin:0 auto;line-height:40px;text-align:center;color:#666;font-size:18px;font-weight:bold;overflow:hidden;}
</style>
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
window.onload = function(){
//運行瀑布流主函數
PBL('wrap','box');
//模擬數據
var data = [{'src':'1.jpg','title':'圖片標題'},{'src':'2.jpg','title':'圖片標題'},{'src':'3.jpg','title':'圖片標題'},{'src':'4.jpg','title':'圖片標題'},{'src':'5.jpg','title':'圖片標題'},{'src':'6.jpg','title':'圖片標題'},{'src':'7.jpg','title':'圖片標題'}];
	//設置滾動加載
	window.onscroll = function(){
		//校驗數據請求
		if(getCheck()){
			var wrap = document.getElementById('wrap');
			for(i in data){
				//創建box
				var box = document.createElement('div');
				box.className = 'box';
				wrap.appendChild(box);
				//創建info
				var info = document.createElement('div');
				info.className = 'info';
				box.appendChild(info);
				//創建pic
				var pic = document.createElement('div');
				pic.className = 'pic';
				info.appendChild(pic);
				//創建img
				var img = document.createElement('img');
				img.src = '/jscss/demoimg/201312/'+data[i].src;
				img.style.height = 'auto';
				pic.appendChild(img);
				//創建title
				var title = document.createElement('div');
				title.className = 'title';
				info.appendChild(title);
				//創建a標記
				var a = document.createElement('a');
				a.innerHTML = data[i].title;
				title.appendChild(a);
			}
			PBL('wrap','box');
		}
	}
}
/**
* 瀑布流主函數
* @param  wrap	[Str] 外層元素的ID
* @param  box 	[Str] 每一個box的類名
*/
function PBL(wrap,box){
	//1.獲得外層以及每一個box
	var wrap = document.getElementById(wrap);
	var boxs  = getClass(wrap,box);
	//2.獲得屏幕可顯示的列數
	var boxW = boxs[0].offsetWidth;
	var colsNum = Math.floor(document.documentElement.clientWidth/boxW);
	wrap.style.width = boxW*colsNum+'px';//爲外層賦值寬度
	//3.循環出所有的box並按照瀑布流排列
	var everyH = [];//定義一個數組存儲每一列的高度
	for (var i = 0; i < boxs.length; i++) {
		if(i<colsNum){
			everyH[i] = boxs[i].offsetHeight;
		}else{
			var minH = Math.min.apply(null,everyH);//獲得最小的列的高度
			var minIndex = getIndex(minH,everyH); //獲得最小列的索引
			getStyle(boxs[i],minH,boxs[minIndex].offsetLeft,i);
			everyH[minIndex] += boxs[i].offsetHeight;//更新最小列的高度
		}
	}
}
/**
* 獲取類元素
* @param  warp		[Obj] 外層
* @param  className	[Str] 類名
*/
function getClass(wrap,className){
	var obj = wrap.getElementsByTagName('*');
	var arr = [];
	for(var i=0;i<obj.length;i++){
		if(obj[i].className == className){
			arr.push(obj[i]);
		}
	}
	return arr;
}
/**
* 獲取最小列的索引
* @param  minH	 [Num] 最小高度
* @param  everyH [Arr] 所有列高度的數組
*/
function getIndex(minH,everyH){
	for(index in everyH){
		if (everyH[index] == minH ) return index;
	}
}
/**
* 數據請求檢驗
*/
function getCheck(){
	var documentH = document.documentElement.clientHeight;
	var scrollH = document.documentElement.scrollTop || document.body.scrollTop;
	return documentH+scrollH>=getLastH() ?true:false;
}
/**
* 獲得最後一個box所在列的高度
*/
function getLastH(){
	var wrap = document.getElementById('wrap');
	var boxs = getClass(wrap,'box');
	return boxs[boxs.length-1].offsetTop+boxs[boxs.length-1].offsetHeight;
}
/**
* 設置加載樣式
* @param  box 	[obj] 設置的Box
* @param  top 	[Num] box的top值
* @param  left 	[Num] box的left值
* @param  index [Num] box的第幾個
*/
var getStartNum = 0;//設置請求加載的條數的位置
function getStyle(box,top,left,index){
    if (getStartNum>=index) return;
    $(box).css({
    	'position':'absolute',
        'top':top,
        "left":left,
        "opacity":"0"
    });
    $(box).stop().animate({
        "opacity":"1"
    },999);
    getStartNum = index;//更新請求數據的條數位置
}
</script>
</head>
<body>
<section id="title">
	<h2>瀑布流效果的學習</h2>By Smile.
</section>
<div id="wrap">
	<div class="box">
		<div class="info">
			<div class="pic"><img src="/jscss/demoimg/201312/1.jpg"></div>
			<div class="title"><a href="#">圖片標題</a></div>
		</div>
	</div>
	<div class="box">
		<div class="info">
			<div class="pic"><img src="/jscss/demoimg/201312/2.jpg"></div>
			<div class="title"><a href="#">圖片標題</a></div>
		</div>
	</div>
	<div class="box">
		<div class="info">
			<div class="pic"><img src="/jscss/demoimg/201312/3.jpg"></div>
			<div class="title"><a href="#">圖片標題</a></div>
		</div>
	</div>
	<div class="box">
		<div class="info">
			<div class="pic"><img src="/jscss/demoimg/201312/4.jpg"></div>
			<div class="title"><a href="#">圖片標題</a></div>
		</div>
	</div>
	<div class="box">
		<div class="info">
			<div class="pic"><img src="/jscss/demoimg/201312/5.jpg"></div>
			<div class="title"><a href="#">圖片標題</a></div>
		</div>
	</div>
	<div class="box">
		<div class="info">
			<div class="pic"><img src="/jscss/demoimg/201312/6.jpg"></div>
			<div class="title"><a href="#">圖片標題</a></div>
		</div>
	</div>
	<div class="box">
		<div class="info">
			<div class="pic"><img src="/jscss/demoimg/201312/7.jpg"></div>
			<div class="title"><a href="#">圖片標題</a></div>
		</div>
	</div>
</div>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

HTML5無限加載的瀑布流邊框圓角陰影

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

CMD查看端口占用情況

http、ftp錯誤代碼集合

quartz定時任務時間配置以及事例

cmd下生成wsdl客戶端代碼指令

Linux中Kill進程的N種方法

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

HTML5無限加載的瀑布流 邊框圓角陰影

HTML5無限加載的瀑布流邊框圓角陰影