js瀑布流图片加载提示代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js瀑布流图片加载提示代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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>
<link href="css/base.css" type="text/css"  rel="stylesheet" media="all" />
<style>
#demo { width:735px; height:auto; position:relative; z-index:0; }
#demo li { margin:5px; background:#fff; border:5px solid #fff; position:absolute; left:0; top:0; z-index:1; }
#demo li p { line-height:50px; text-align:center; }
.hidden { overflow:hidden; }
#loading { background:#fff url(images/loading.gif) no-repeat 10px center; height:50px; line-height:50px; width:140px; text-align:center; position:absolute; left:0; top:0; z-index:2; padding-left:30px; padding-right:5px; border:2px #aaa solid; display:none; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js瀑布流图片加载提示</title>
<script src="js/Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>
<script>

// Create object
var Waterfall = Waterfall || {} ;

// Controller object
Waterfall.controller = function( A$ )
{
	var _view = Waterfall.view;
	
	_view.appendLoad( "<div id=\"loading\">图片列表加载中 ...</div>", A$ );
	
	return {
		
		config : function( w, c, b, m, o )
		{
			_view.iWidth = w;
			_view.iCount = c;
			_view.iBoder = b;
			_view.iMargin = m;
			_view.oList = o;
			_view.oload = A$("#loading");
		},
		
		init : function( callback )
		{
			_view.init( A$ );
			
			( typeof callback ).toLowerCase() === "function" && callback.call( this );
		},
		
		event : function()
		{
			var e = _view.Event();
			
			return {
				scroll : function( _window )
				{
					e.scroll.call( e, _window, A$ );
				}
			}
		}
	}

};

// View object
Waterfall.view = {
	
	// aHeight [ 0 => left , 1 => center , 2 => right ]
	aHeight : [ [], [], [] ],
	
	appendLoad : function( str, A$ )
	{
		!A$.byID("#loading")[0] && A$("body").append( str );
	},
	
	preLoad : function( win, o , t )
	{		
		o.setStyle( "left", ( win.width() - o.width( true ) )/2 )
		 .stop()
		 .fx({ "top": ( win.height() - o.height( true ) )/2 + t }, 200 );
	},
	
	loadShow : function( o )
	{
		o.show();
	},
	
	loadHide : function( o )
	{
		o.hide();
	},

	Event : function()
	{
		var e = this;
		
		return {
			scroll : function( _win, A$ )
			{
				var viewHeight, oload, oWrap, bool, view;
				
				view = Waterfall.view;
				viewHeight = _win.height();
				oload = view.oload;
				oWrap = Waterfall.view.oList.eq(0).parents();
				bool = true;
				
				_win.bind( "scroll", function()
				{
					var iTop, lastListTop, olist;
					
					iTop = _win.scrollTop();
					olist = oWrap.children();
					
					lastListTop = olist.eq( olist.length - 1 ).top( true );
					
					//oload.getStyle("display") === "block" && 
					e.preLoad( _win, oload, iTop );
					
					if( lastListTop < iTop + viewHeight && bool )
					{

						view.loadShow( oload );
						
						bool = false;
						
						// 获取数据
						Waterfall.model.getInformation( A$, function( list, _b )
						{
							this.page += 1;
							
							var title = list.title;
							
							var page = this.page - 1;
							
							A$.each( list.src, function( i, v )
							{
								var _this, iNow, iStep, iLeft, iTop, j;
								
								iNow = i%view.iCount;
								iStep = Math.floor( i/view.iCount ) + page * view.iCount;
								iLeft = iNow * ( view.iWidth + view.iBoder + view.iMargin );
								
								_this = document.createElement("li");
								_this.style.cssText = "left:"+ iLeft +"px;display:block;";
								_this.innerHTML = "<img src=\"" + v + "\" /><p>"+ title[ i ] +"</p>";

								oWrap.append( _this );
								
								view.aHeight[ iNow ].push( _this.offsetHeight );
								
								iTop = 0;
								
								for( j = 0; j < iStep; j += 1 )
								{
									iTop += view.aHeight[ iNow ][ j ] + view.iMargin;
								};
								
								_this.style.top = iTop + "px";
							});
							
							bool = _b;
							
							view.loadHide( oload );
						});
					};
				});
			}
		};
	},
	
	init : function( A$ )
	{
		var _self, _view, _load, _win;
		
		_self = this;
		_view = Waterfall.view;
		_load = _view.oload;
		_win = A$( window );
		
		_self.loadShow( _load );
		_self.preLoad( _win, _load, _win.scrollTop() );

		_view.oList
	    	 .eq( 0 )
	    	 .parents()
			 .removeClass("hidden");
		
		A$.each( _self.oList, function( i, v )
		{
			var _this, iNow, iStep, iLeft, iTop, j;
			
		    _this = A$( this );
			
			iNow = i%_self.iCount;
			iStep = Math.floor(i/_self.iCount);
			iLeft = iNow * ( _self.iWidth + _self.iBoder + _self.iMargin );
			
			_view.aHeight[ iNow ].push( _this[0].offsetHeight );
			
			iTop = 0;
			
			if( iStep )
			{
				for( j = 0; j < iStep; j += 1 )
				{
					iTop += _view.aHeight[ iNow ][ j ] + _self.iMargin;
				};
			};
			
			_this.setStyle({ 
				left : iLeft,
				top : iTop
			});
		});
		
		_self.loadHide( _load );
	}
};

// Model object
Waterfall.model = {
	
	page : 1,
	
	getInformation : function( A$, success  )
	{
		var _self = this;
		
		A$.ajax({
			type : "get",
			// 本地模拟数据
			url : "data" + _self.page +".js", // 测试data.js 
			// PHP环境模拟数据
			//url : "data.php?page=" + _self.page + "&num=9", // 测试data.php
			success : function( data )
			{
				var json = eval( "(" + data + ")" );
				
				if( json.code === "1" )
				{
					success.call( _self, json.list, true );
				}
				else
				{
					Waterfall.view.loadHide( Waterfall.view.oload );
				};
			}
		});
	}
};


window.onload = function()
{
	
	var oList, o, oWin;
	
	oWin = Aui( window );
	oList = Aui( "#demo li");
	// 实例化对象
	o = new Waterfall.controller( Aui );
	// 配置参数( 宽度，纵向个数， 边框像素（单边*2）, 外边距像素(单边*2), Aui列表对象 )
	o.config( 225, 3, 10, 10, oList )
	// 初始化定位布局
	o.init( function()
	{
		// 调用滑轮事件
		this.event().scroll( oWin )
	});
};

</script>
</head>
<body>
<ul id="demo" class="hidden tabs_wrap" >
  <li> <img src="images/1.jpg" />
    <p>这个是标题1</p>
  </li>
  <li> <img src="images/2.jpg" />
    <p>这个是标题2</p>
  </li>
  <li> <img src="images/3.jpg" />
    <p>这个是标题3</p>
  </li>
  <li> <img src="images/4.jpg" />
    <p>这个是标题4</p>
  </li>
  <li> <img src="images/5.jpg" />
    <p>这个是标题5</p>
  </li>
  <li> <img src="images/6.jpg" />
    <p>这个是标题6</p>
  </li>
  <li> <img src="images/7.jpg" />
    <p>这个是标题7</p>
  </li>
  <li> <img src="images/8.jpg" />
    <p>这个是标题8</p>
  </li>
  <li> <img src="images/9.jpg" />
    <p>这个是标题9</p>
  </li>
  <li> <img src="images/1.jpg" />
    <p>这个是标题1</p>
  </li>
  <li> <img src="images/2.jpg" />
    <p>这个是标题2</p>
  </li>
  <li> <img src="images/3.jpg" />
    <p>这个是标题3</p>
  </li>
  <li> <img src="images/4.jpg" />
    <p>这个是标题4</p>
  </li>
  <li> <img src="images/5.jpg" />
    <p>这个是标题5</p>
  </li>
  <li> <img src="images/6.jpg" />
    <p>这个是标题6</p>
  </li>
  <li> <img src="images/7.jpg" />
    <p>这个是标题7</p>
  </li>
  <li> <img src="images/8.jpg" />
    <p>这个是标题8</p>
  </li>
  <li> <img src="images/9.jpg" />
    <p>这个是标题9</p>
  </li>
</ul>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</body>
</html>

JS代码(data1.js):

{
	"code":"1","list":{
	"src":["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg","images/9.jpg"],"title":["这个是标题10","这个是标题11","这个是标题12","这个是标题13","这个是标题14","这个是标题15","这个是标题16","这个是标题17","这个是标题18"]}
}

JS代码(json2.js):

eval(function(p,a,c,k,e,r){
	e=function(c){
	return(c<62?'':e(parseInt(c/62)))+((c=c%62)>35?String.fromCharCode(c+29):c.toString(36))}
;
	if('0'.replace(0,e)==0){
	while(c--)r[e(c)]=k[c];
	k=[function(e){
	return r[e]||e}
];
	e=function(){
	return'([235-9ehlmo-qw-zA-EG-SU-Y]|1\\w)'}
;
	c=1}
;
	while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);
	return p}
('3(5 m!==\'x\'){
	m={
}
}
(6(){
	\'use strict\';
	6 f(n){
	7 n<10?\'0\'+n:n}
3(5 13.o.y!==\'6\'){
	13.o.y=6(h){
	7 14(p.15())?p.getUTCFullYear()+\'-\'+f(p.getUTCMonth()+1)+\'-\'+f(p.getUTCDate())+\'T\'+f(p.getUTCHours())+\':\'+f(p.getUTCMinutes())+\':\'+f(p.getUTCSeconds())+\'Z\':z}
;
	L.o.y=Number.o.y=Boolean.o.y=6(h){
	7 p.15()}
}
A M=/[\\u0000\\17\\18-\\19\\1a\\1b\\1c\\1d-\\1e\\1f-\\1g\\1h-\\1i\\1j\\1k-\\1l]/g,N=/[\\\\\\"\\x00-\\x1f\\x7f-\\x9f\\17\\18-\\19\\1a\\1b\\1c\\1d-\\1e\\1f-\\1g\\1h-\\1i\\1j\\1k-\\1l]/g,8,D,1m={
	\'\\b\':\'\\\\b\',\'\\t\':\'\\\\t\',\'\\n\':\'\\\\n\',\'\\f\':\'\\\\f\',\'\\r\':\'\\\\r\',\'"\':\'\\\\"\',\'\\\\\':\'\\\\\\\\\'}
,l;
	6 O(q){
	N.1n=0;
	7 N.R(q)?\'"\'+q.E(N,6(a){
	A c=1m[a];
	7 5 c===\'q\'?c:\'\\\\u\'+(\'1o\'+a.1p(0).S(16)).1q(-4)}
)+\'"\':\'"\'+q+\'"\'}
6 G(h,B){
	A i,k,v,e,H=8,9,2=B[h];
	3(2&&5 2===\'x\'&&5 2.y===\'6\'){
	2=2.y(h)}
3(5 l===\'6\'){
	2=l.P(B,h,2)}
switch(5 2){
	I\'q\':7 O(2);
	I\'U\':7 14(2)?L(2):\'z\';
	I\'boolean\':I\'z\':7 L(2);
	I\'x\':3(!2){
	7\'z\'}
8+=D;
	9=[];
	3(V.o.S.apply(2)===\'[x Array]\'){
	e=2.e;
	J(i=0;
	i<e;
	i+=1){
	9[i]=G(i,2)||\'z\'}
v=9.e===0?\'[]\':8?\'[\\n\'+8+9.Q(\',\\n\'+8)+\'\\n\'+H+\']\':\'[\'+9.Q(\',\')+\']\';
	8=H;
	7 v}
3(l&&5 l===\'x\'){
	e=l.e;
	J(i=0;
	i<e;
	i+=1){
	3(5 l[i]===\'q\'){
	k=l[i];
	v=G(k,2);
	3(v){
	9.1r(O(k)+(8?\':\':\':\')+v)}
}
}
}
W{
	J(k in 2){
	3(V.o.1t.P(2,k)){
	v=G(k,2);
	3(v){
	9.1r(O(k)+(8?\':\':\':\')+v)}
}
}
}
v=9.e===0?\'{
}
\':8?\'{
	\\n\'+8+9.Q(\',\\n\'+8)+\'\\n\'+H+\'}
\':\'{
	\'+9.Q(\',\')+\'}
\';
	8=H;
	7 v}
}
3(5 m.X!==\'6\'){
	m.X=6(2,C,K){
	A i;
	8=\'\';
	D=\'\';
	3(5 K===\'U\'){
	J(i=0;
	i<K;
	i+=1){
	D+=\' \'}
}
W 3(5 K===\'q\'){
	D=K}
l=C;
	3(C&&5 C!==\'6\'&&(5 C!==\'x\'||5 C.e!==\'U\')){
	1u 1v Error(\'m.X\');
}
7 G(\'\',{
	\'\':2}
)}
}
3(5 m.Y!==\'6\'){
	m.Y=6(w,11){
	A j;
	6 12(B,h){
	A k,v,2=B[h];
	3(2&&5 2===\'x\'){
	J(k in 2){
	3(V.o.1t.P(2,k)){
	v=12(2,k);
	3(v!==undefined){
	2[k]=v}
W{
	delete 2[k]}
}
}
}
7 11.P(B,h,2)}
w=L(w);
	M.1n=0;
	3(M.R(w)){
	w=w.E(M,6(a){
	7\'\\\\u\'+(\'1o\'+a.1p(0).S(16)).1q(-4)}
)}
3(/^[\\],:{
}
\\s]*$/.R(w.E(/\\\\(?:["\\\\\\/bfnrt]|u[0-9a-fA-F]{
	4}
)/g,\'@\').E(/"[^"\\\\\\n\\r]*"|true|false|z|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?/g,\']\').E(/(?:^|:|,)(?:\\s*\\[)+/g,\'\'))){
	j=eval(\'(\'+w+\')\');
	7 5 11===\'6\'?12({
	\'\':j}
,\'\'):j}
1u 1v SyntaxError(\'m.Y\');
}
}
}
());
	',[],94,'||value|if||typeof|function|return|gap|partial|||||length|||key||||rep|JSON||prototype|this|string||||||text|object|toJSON|null|var|holder|replacer|indent|replace||str|mind|case|for|space|String|cx|escapable|quote|call|join|test|toString||number|Object|else|stringify|parse|||reviver|walk|Date|isFinite|valueOf||u00ad|u0600|u0604|u070f|u17b4|u17b5|u200c|u200f|u2028|u202f|u2060|u206f|ufeff|ufff0|uffff|meta|lastIndex|0000|charCodeAt|slice|push||hasOwnProperty|throw|new'.split('|'),0,{
}
))

CSS代码(base.css):

*{font-size:13px;font-family:Georgia,"Times New Roman","宋体";color:#333;margin:0;padding:0;list-style:none;text-shadow:0 1px 1px #fff;}
html{background:url(bg.png) repeat;}
a img{border:0;}
#demo,#demo1,#demo2,#demo3,#demo4,#demo5,#demo6,#demo7,#demo8{margin:0 auto;}
h1{text-align:center;font-size:30px;font-weight:bold;color:#c00;text-shadow:1px 1px 0 #fff;margin:60px 0 40px;border-bottom:1px dashed #999;border-top:1px dashed #999;padding:20px 0;background:#EEE;}

附件:下载该文件资源,减少时间成本(增值服务)