Ajax+json+jquery實現無限瀑布流佈局

時間 2019-11-11
標籤 ajax+json+jquery ajax json jquery 實現無限瀑布佈局欄目 Ajax 简体版
原文原文鏈接
Ajax+json+jquery實現無限瀑布流佈局javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定寬Jquery+AJAX+JSON瀑布流佈局（每行代碼都有詳細註釋）</title>
<style type="text/css">
body, ul, li, h3 { margin: 0; padding: 0; list-style: none; font: bold 12px "微軟雅黑"; }
/*瀑布流佈局樣式*/
#lxf-box { position: relative; width: 1000px; margin:0 auto;}
#lxf-box li { background: #fff; border: solid 1px #ccc; text-align: center; padding: 10px; float: left;}
h3 { padding-top: 8px; }
img { width: 200px; height: auto; display: block; border: 0 }
/*css3動畫 注因爲是css3製做的因此兼容性不保證 要想兼容性好 請本身作成gif動畫加載圖*/
/*li { -webkit-transition: all .7s ease-out .1s; -moz-transition: all .7s ease-out; -o-transition: all .7s ease-out .1s; transition: all .7s ease-out .1s }*/
#loading { display:none; line-height: 30px; background: #000; color:#fff; text-align: center; height: 30px; width: 100%; position:fixed; bottom:0; opacity:0.8;}
</style>
<script src="http://www.iiwnet.com/templets/niu/js/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<h1 color="red">預覽無效果請刷新</h1>
<ul id="lxf-box">
  <li><a href="http://www.iiwnet.com/div_css/342.html"><img src="http://www.iiwnet.com/uploads/allimg/120814/1-120Q411544TX.jpg"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/ajax/237.html"><img src="http://www.iiwnet.com/uploads/allimg/120801/1-120P1223013157.jpg"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/js_ad/271.html/"><img src="http://www.iiwnet.com/uploads/allimg/120808/1-120PP00915a2.jpg"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/js_texiao/312.html/"><img src="http://www.iiwnet.com/uploads/allimg/120812/1-120Q2150022G8.jpg"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/js_pic/191.html/"><img src="http://www.iiwnet.com/uploads/allimg/120722/1-120H2144003129.jpg"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/js_pic/318.html/"><img src="http://www.iiwnet.com/uploads/allimg/120812/1-120Q2161941b2.jpg"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/div_css/341.html/"><img src="http://www.iiwnet.com/uploads/allimg/120814/1-120Q4113240U2.jpg"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/div_css/350.html/"><img src="http://www.iiwnet.com/uploads/allimg/120814/125411K11-2.png"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/div_css/350.html/"><img src="http://www.iiwnet.com/uploads/allimg/120814/1254113249-12.png"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/div_css/349.html/"><img src="http://www.iiwnet.com/uploads/allimg/120814/12500a292-1.png"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/php_base/336.html/"><img src="http://www.iiwnet.com/uploads/allimg/120813/1-120Q3145U0938.jpg"></a>
    <h3>圖片標題</h3>
  </li>
  <li><a href="http://www.iiwnet.com/div_css/344.html/"><img src="http://www.iiwnet.com/uploads/allimg/120814/12353B521-0.jpg"></a>
    <h3>圖片標題</h3>
  </li>
</ul>
<div id="loading">正在加載……</div>
<script>
/*
原理：1.把全部的li的高度值放到數組裏面
     2.第一行的top都爲0
	 3.計算高度值最小的值是哪一個li
	 4.把接下來的li放到那個li的下面
<a href="http://iiwnet.com/js_web/">網頁特效代碼</a>：http://iiwnet.com
編寫時間：2012年6月9日
*/

function iiwnet(){//定義成函數便於調用
var wrap = document.getElementById("lxf-box")
var margin = 10;//這裏設置間距
var li=$("li");//這裏是區塊名稱
var	li_W = li[0].offsetWidth+margin;//取區塊的實際寬度（包含間距，這裏使用源生的offsetWidth函數，不適用jQuery的width()函數是由於它不能取得實際寬度，例如元素內有pandding就不行了）
var h=[];//記錄區塊高度的數組
    li.css("position","absolute");
	var n = wrap.offsetWidth/li_W|0;//容器的寬度除以區塊寬度就是一行能放幾個區塊
	for(var i = 0;i < li.length;i++) {//有多少個li就循環多少次
		li_H = li[i].offsetHeight;//獲取每一個li的高度
		if(i < n) {//n是一行最多的li，因此小於n就是第一行了
			h[i]=li_H;//把每一個li放到數組裏面
			li.eq(i).css("top",0);//第一行的Li的top值爲0
			li.eq(i).css("left",i * li_W);//第i個li的左座標就是i*li的寬度
			}
		else{
			min_H =Math.min.apply(null,h) ;//取得數組中的最小值，區塊中高度值最小的那個
			minKey = getarraykey(h, min_H);//最小的值對應的指針
			h[minKey] += li_H+margin ;//加上新高度後更新高度值
			li.eq(i).css("top",min_H+margin);//先獲得高度最小的Li，而後把接下來的li放到它的下面
			li.eq(i).css("left",minKey * li_W);	//第i個li的左座標就是i*li的寬度
		}
		$("h3").eq(i).text("編號："+i+"，高度："+li_H);//把區塊的序號和它的高度值寫入對應的區塊H3標題裏面
		$("li").animate({opacity:1});
	}
}
/* 使用for in運算返回數組中某一值的對應項數(好比算出最小的高度值是數組裏面的第幾個) */
function getarraykey(s, v) {for(k in s) {if(s[k] == v) {return k;}}}
/*這裏必定要用onload，由於圖片不加載完就不知道高度值*/
window.onload = function() {iiwnet();};
/*瀏覽器窗口改變時也運行函數*/
window.onresize = function() {iiwnet();};

/**********************************************************************/
/*無限加載*/
var i=1;
function getMore(){
	$("#loading").show();	
	var json = "http://www.iiwnet.com/images/jstx/img.js";
		$.getJSON(json, function(data){	
				$.each(data,function(i){
				var url=data[i].url;	
				var html="<li style='opacity:0'><a href='http://www.iiwnet.com/'><img src="+url+" ></a><h3>圖片標題</h3></li>";		
			$("#lxf-box").append(html);		
					$("#loading").hide();
				});
				iiwnet();
				i=1
		});
	};
	/*滾動到底部的時候*/
	 $(window).bind("scroll",function(){
	if( $(document).scrollTop() + $(window).height() > $(document).height() - 10 && i==1) {
		i=0;
		getMore();
		
		}
	 });
</script>
</body>
</html><p>
<!--ad-->
<script type="text/javascript">/*640*60，建立於2012-8-8*/ var cpro_id = 'u1015696';</script><script src="http://cpro.baidu.com/cpro/ui/c.js" type="text/javascript"></script>
</p>
								<p align="center"><font color=red>若是運行效果無非顯示請點擊【刷新頁面】</font><br/>【<a href="http://www.iiwnet.com" target="_blank"><font color="#666666">返回首頁</font></a>】【<a href="javascript:this.location.reload()"><font color="#666666">刷新本頁</font></a>】【<a href="javascript:window.scroll(0,0)"><font color="#666666">返回頂部</font></a>】【<a href="javascript:window.close()"><font color="#666666">關閉本頁</font></a>】</p><p align="center">愛微網--有愛、愛細節、愛分享 | 打造最好的PHP學習PHP技巧PHP學習資料教程CSS佈局JS特效代碼學習網</p>
Ajax+json+jquery實現無限瀑布流佈局寬度是必定的高度不定的瀑布流佈局也能夠說是無縫拼圖當瀏覽器滾動到底部時候自動加載圖片加載的圖片地址用json 在img.js裏，還有正在加載動畫是用css3製做的在ff等支持css3能夠顯示