瀑布流lightbox+php无限加载分页，方便多图片加载慢的问题解决，可以控制单次显现多少张图片。

样子如图：可以适应手机

直接上代码：

先是javascript:

var isWidescreen=screen.width>=1440;    
if(isWidescreen){document.write("<style type='text/css'>.demo{width:1280px;}</style>");}    
var isWidescreen=screen.width<=480; //适应手机查看    
if(isWidescreen){document.write("<style type='text/css'>.demo{width:480px;}</style>");}    
</script>    
<script type="text/javascript">    
function item_masonry(){    
	$('.item img').load(function(){    
		$('.infinite_scroll').masonry({    
			itemSelector: '.masonry_brick',    
			columnWidth:226,    
			gutterWidth:15								
    
		});		
    
	});    
	$('.infinite_scroll').masonry({    
		itemSelector: '.masonry_brick',    
		columnWidth:226,    
		gutterWidth:15								
    
	});	
    
}    
$(function(){    
	function item_callback(){    
		$('.item').mouseover(function(){    
			$(this).css('box-shadow', '0 1px 5px rgba(35,25,25,0.5)');    
			$('.btns',this).show();    
		}).mouseout(function(){    
			$(this).css('box-shadow', '0 1px 3px rgba(34,25,25,0.2)');    
			$('.btns',this).hide();		 	
    
		});    
		item_masonry();	
    
	}    
	item_callback();    
	$('.item').fadeIn();    
	var sp = 1    
	//alert(sp);    
	$(".infinite_scroll").infinitescroll({    
		navSelector  	: "#more",    
		nextSelector 	: "#more a",    
		itemSelector 	: ".item",    
		loading:{    
			img: "images/masonry_loading_1.gif",    
			msgText: 'loading... ',    
			finishedMsg: '木有了',    
			finished: function(){    
				sp++;    
				if(sp>=7){ //到第10页结束事件    
					$("#more").remove();    
					$("#infscr-loading").hide();    
					$("#page").show();    
					$(window).unbind('.infscr');    
				}    
			}	
    
		},errorCallback:function(){    
			$("#page").show();    
		}    
	},function(newElements){    
		var $newElems = $(newElements);    
		$('.infinite_scroll').masonry('appended', $newElems, false);    
		//alert(newElements)    
		$newElems.fadeIn();    
		item_callback();    
		return;    
	});    
});

后面是php+数据库

<?php 
   include("../conn.php");

    $curpg=$_POST["curpg"];
	$curre=($curpg-1)*15;
	
	$sql_que=mysql_query("select id,picName,picUrl from  pictures order by id asc limit ".$curre.",15");
	for($i=1;$i<=15;$i++){
	$res=mysql_fetch_row($sql_que);
	if(!$res){break;}
	?>
    <!--item begin-->	
		<div class="item masonry_brick">
			<div class="item_t">
				<div class="img">
					<a href="<?=$res[2]?>" data-lightbox="example-set"  data-title="<?=$res[1]?>"><img  src=<?=$res[2]?>  width="210" /></a>
				</div>
				<div class="title"><span><?=$res[1]?></span></div>
			</div>
			</div>
		</div>
        <!--item end-->
		<?php
		}
		?>

源码下载地址：

http://www.zijingyuecheng.com/p/p.rar