jQuery瀑布流

 查看演示  website  立即下载

================== 以下代码由 冷星 提供 ===================

ajax获得数据，显示，会存在问题，需要修改一下ajax那部分的代码，其他地方动画会相互干扰，我的是这样的，服务器端语言PHP ，，页面上的script如下

<script type="text/javascript">
	var count={$count};//从服务器端得到的总的数据条数
	function deleteShow(){
		$('.sp2').each(function(index, element) {
			var staff_number=$(this).attr('name');
			var myNum=$('#staff_number').text();
			if(myNum==staff_number){
				$(this).show();
				var delLi=$(this).parents('li');
				$(this).unbind('click').click(function(e) {
					var log_id=$(this).children('b').attr('class');
					$.post('{:U("deletelog")}',{log_id:log_id},function(data,status){
						if(data==1){
						alertBox('删除成功',2000,2000);
						count--;
						delLi.remove();
						}else{alertBox('删除失败了！',2000,2000);}
					});	
				});
			}else{
				$(this).hide();
			}
		});
		
	}
	$(document).ready(function(e) {
        deleteShow();
		
    });
	/*
		抛开瀑布流布局各种乱七八糟的算法，基于masonry的瀑布流，很是简单的，而且通过扩展animate,能实现瀑布流布局的晃动、弹球等效果。
		masonry还有很多参数我这里注解了常用的参数
	 */
		$(function(){
				/*瀑布流开始*/
				var container = $('.waterfull ul');
				var loading=$('#imloading');
				// 初始化loading状态
				loading.data("on",true);
				/*判断瀑布流最大布局宽度，最大为1280*/
				function tores(){
					var tmpWid=$(window).width();
					if(tmpWid>1280){
						tmpWid=1280;
					}else{
						var column=Math.floor(tmpWid/320);
						tmpWid=column*320;
					}
					$('.waterfull').width(tmpWid);
				}
				tores();
				$(window).resize(function(){
					tores();
				});
				container.imagesLoaded(function(){
				  container.masonry({
				  	columnWidth: 320,
				    itemSelector : '.item',
				    isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
				    isAnimated: true,//是否采用jquery动画进行重拍版
				    isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
				    isResizable: true,//是否自动布局默认true
				    animationOptions: {
						duration: 800,
						easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
						queue: false//是否队列，从一点填充瀑布流
					}
				  });
				});
				/*模拟从后台获取到的数据*/
									
				var dataLoading = false;
				var canColorChange = true;
				$(window).scroll(function(){
					if(!loading.data("on")) return;
					if(dataLoading) return;
					// 计算所有瀑布流块中距离顶部最大，进而在滚动条滚动时，来进行ajax请求，方法很多这里只列举最简单一种，最易理解一种
					var itemNum=$('#waterfull').find('.item').length;
					var itemArr=[];
					itemArr[0]=$('#waterfull').find('.item').eq(itemNum-1).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					itemArr[1]=$('#waterfull').find('.item').eq(itemNum-2).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					itemArr[2]=$('#waterfull').find('.item').eq(itemNum-3).offset().top+$('#waterfull').find('.item').eq(itemNum-1)[0].offsetHeight;
					var maxTop=Math.max.apply(null,itemArr);
					if(maxTop<$(window).height()+$(document).scrollTop()){
						//加载更多数据
						//var lilength=$('.item').length+1;
						var sqlJson='';
						dataLoading = true;
						$.get("{:U('showlogAjax')}",{last:itemNum},function(data,status){
							if(status == "success"){
									sqlJson = eval("("+data+")");
									loading.data("on",false).fadeIn(800);
									addFlow(sqlJson);
							}else{
								alert('出错了！');
							}
							dataLoading = false;
						});
						
						
					}
					function  addFlow(sqlJson){
						/*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/
						if(itemNum>=count){
							loading.text('就有这么多了！');
						}else{
							var html="";
							
							for(var i in sqlJson){
								html+="<li class='item'><a href='####' class='a-img'></a>";
								html+="<h2 class='li-title'>"+sqlJson[i].log_title+"</h2>";
								html+="<div class='description'>"+sqlJson[i].log_text+"</div><div class='qianm clearfloat'>";
								html+="<span class='sp1'><b>"+sqlJson[i].staff_name+"</b></span>";
								html+="<span class='sp2' name="+sqlJson[i].staff_number+"><b class="+sqlJson[i].log_id+">删除</b></span>";
								html+="<span class='sp3'>"+sqlJson[i].log_date+"</span></div></li>";		
							}
							/*模拟ajax请求数据时延时800毫秒*/
							var time=setTimeout(function(){
								var $newElems = $(html).css({ opacity: 0}).appendTo(container);
								$newElems.imagesLoaded(function(){
									canColorChange = false;
									$newElems.animate({ opacity: 1},800, function(){
										canColorChange = true;
									});
									container.masonry( 'appended', $newElems,true);
									loading.data("on",true).fadeOut();
									clearTimeout(time);
									deleteShow();
									
								});
							},800)
						}
					}
				});

			/*item hover效果*/
			var rbgB=['#71D3F5','#F0C179','#F28386','#8BD38B'];
			$('#waterfull').on('mouseover','.item',function(){
				if(!canColorChange) return;
				var random=Math.floor(Math.random() * 4);
				$(this).stop(true).animate({'backgroundColor':rbgB[random]},1000);
			});
			$('#waterfull').on('mouseout','.item',function(){
				if(!canColorChange) return;
				$(this).stop(true).animate({'backgroundColor':'#fff'},1000);
			});
		})
		
		
    </script>

PREVIOUS:
NEXT:
抽奖程序
css3动画库