利用Jquery.masonry插件兑现的瀑布流特效

利用Jquery.masonry插件实现的瀑布流特效
转载：http://www.jq-school.com/Detail.aspx?id=62

此Jquery特效是用了jquery.masonry.min.js插件实现的，为了让网友们方便学习和使用,把代码写成简单化和实现了瀑布流布局+滚动无限加载数据，为了网友更好的配合后台程序调用动态数据，还写了一个获取动态数据的方法。

主要功能代码如下：

<script type="text/javascript">	
	var flag = true;
	$(function(){			
		var $container = $('#listing');    
		$container.masonry({
			singleMode: true,
			animate: true,
			itemSelector: '.post'
		});		
		//滚动条滚动到离底部距离50的时候触发
		$(window).scroll(function(){
			// 当滚动到最底部以上100像素时， 加载新内容
	
		if ($(document).height() - $(this).scrollTop() - $(this).height()<50){	
				if (flag){
					var $boxes = $(getList());	 
					$container.append($boxes).masonry('appended',$boxes);
				}
			}
		});	
	});	
	//测试获取列表
	function getList() {	
		var boxes = [],count = parseInt(Math.random()*10); 
		for (var i=0; i < count; i++ ) {
			boxes.push('<div class="post"><a href="#"><img src="images/'+(i+1)+'.jpg" width="280" alt="" /></a><a href="#" target="_blank">图片'+(i+1)+'</a></div>');
		}
		//把数组转成字符串
		return boxes.join("");
	};
</script>