新手求助！动态加载的瀑布流+tab后瀑布流出错重叠求帮助

[dolores_0903]

先弄了个动态加载的瀑布流之后 想加一个TAB可以切换历史和将来
但发现加了TAB之后 瀑布流虽然也加载 但会和原先的重叠
求帮助
这是加TAB的

	
		$(document).ready(function() {
	$(".tab_left a").each(function(j) {
		var num = j + 1;
		$(this).click(function() {
			
			for (var i = 1; i <= 2; i++) {
				$(".tab_kc" + i).css("display", "none");
			}
			$(".tab_kc" + num).css("display", "block");
			

		});
	});

这是HTML 中间瀑布流的样式就不写了哈

<div class="position_pbl">


               <div class="tab_left">
			       <ul>
				    <li><a href="#">HISTORY  | </a>
				    </li>
				    <li><a href="#">  FUTURE</a>
				    </li>
				
			       </ul>
		       </div>
<div class="content tab_kc1" style="display:block;">
		<!-- 瀑布流样式开始 -->
		<div class="waterfull clearfloat" id="waterful1l"></div>
              <!-- 瀑布流样式结束 -->
<div class="content tab_kc2" style="display:block;">
              <!-- 瀑布流样式开始 -->
		<div class="waterfull clearfloat" id="waterfull2"></div>
               <!-- 瀑布流样式结束 -->

</div>

瀑布流

$(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/310);
						tmpWid=column*310;
					}
					$('.waterfull').width(tmpWid);
				}
				tores();
				$(window).resize(function(){
					tores();
				});
				container.imagesLoaded(function(){
				  container.masonry({
				  	columnWidth: 310,
				    itemSelector : '.item',
				    isFitWidth: true,//是否根据浏览器窗口大小自动适应默认false
				    isAnimated: true,//是否采用jquery动画进行重拍版
				    isRTL:false,//设置布局的排列方式，即：定位砖块时，是从左向右排列还是从右向左排列。默认值为false，即从左向右
				    isResizable: true,//是否自动布局默认true
				    animationOptions: {
						duration: 800,
						easing: 'easeInOutBack',//如果你引用了jQeasing这里就可以添加对应的动态动画效果，如果没引用删除这行，默认是匀速变化
						queue: false//是否队列，从一点填充瀑布流
					}
				  });
				});
				/*模拟从后台获取到的数据*/
				var sqlJson=[{'title':'SoulKool Recruitments</br>in 2016 Autumn','intro':'Time:2016/10/16</br>Location:Sunken Plaza in SHU</br>Admission:free','src':'imgs/events/events-history_28.jpg','idname':'item12'},{'title':'University Dance Class','intro':'Time:2016/10/20</br>Location:Training Stadium</br>Admission:300RMB(for 7 lessons)','src':'imgs/events/unversityclass.png','idname':'item13'},{'title':'Flash Mob For SHU','intro':'Time:2016/11/21</br>Location:The Bund</br>Admission:free','src':'imgs/events/events-history_29.jpg','idname':'item14'},{'title':'One Party Vol.1</br>Universities Crew Battle','intro':'Time:2016/10/26</br>+Location:Propoganda</br>Admission:60RMB','src':'imgs/events/events-history_33.jpg','idname':'item15'},{'title':'Every Little Step Vol.8 </br>Crew Battle','intro':'Time:2016/11/28</br>Location:ECUST</br>Admission:free','src':'imgs/events/events-history_34.jpg','idname':'item16'},{'title':'Bong Vol.2','intro':'Time:2017/01/07</br>Location:Fitness Center</br> Admission:free','src':'imgs/events/events-history_35.jpg','idname':'item17'},{'title':'Routine Check','intro':'Time:2017/01/28</br>Location:East Building</br>Admission:free','src':'imgs/events/events-history_36.jpg','idname':'item18'}];
				/*本应该通过ajax从后台请求过来类似sqljson的数据然后，便利，进行填充，这里我们用sqlJson来模拟一下数据*/
				$(window).scroll(function(){
					if(!loading.data("on")) 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()){
						//加载更多数据
						loading.data("on",false).fadeIn(800);
						(function(sqlJson){
							/*这里会根据后台返回的数据来判断是否你进行分页或者数据加载完毕这里假设大于30就不在加载数据*/
							if(itemNum>15){
								loading.text('就有这么多了！');
							}else{
								var html="";
								for(var i in sqlJson){
									html+="<li class='item'><a href='javascript:;' class='a-img' onClick='showMask()' id='"+sqlJson[i].idname+"'><img src='"+sqlJson[i].src+"'></a>";
									
									html+="<h2 class='li-title'>"+sqlJson[i].title+"</h2>";
									html+="<p class='description'>"+sqlJson[i].intro+"</p></li>";		
								}
								/*模拟ajax请求数据时延时800毫秒*/
								
								var time=setTimeout(function(){
									$(html).find('img').each(function(index){
										loadImage($(this).attr('src'));
									})
									var $newElems = $(html).css({ opacity: 0}).appendTo(container);
									$newElems.imagesLoaded(function(){
										$newElems.animate({ opacity: 1},800);
										container.masonry( 'appended', $newElems,true);
										loading.data("on",true).fadeOut();
										clearTimeout(time);
							        });
								},800)
							}
						})(sqlJson);
					}
				});