网站错落有致的布局(瀑布流)

这种布局是当下比较流行的一种布局风格,大家把它叫做“瀑布流”,开始也没有接触过这种布局,使用它是因为公司网站上需要用到。所以经理布下任务要我搞定,开始baidu,google上面疯狂的找资料,也到用到过这种布局的网站上看别人是怎么用的,最后找到了masonry插件,这种插件就是瀑布流风格的核心,当然也有其他种类的瀑布流。

masonry使用起来非常的简单:

1:导入js库

<script type="text/javascript" src="${ctx}/scripts/framework/jquery/jquery.masonry.min.js"></script>
2:页面加载完之后
$('#container').imagesLoaded(function(){ //如果有图片的话 等待图片加载完之后再进行布局
		$('#container').masonry({ // container  是存放需要布局的元素的容器   
				itemSelector: '.magabox',
				isAnimated:false
		});
	});

基本上这种布局就可以实现了,但是网站中什么业务都可能会出现,之后可能会需要根究滚动条动态加载数据进行布局,就是常说的无限加载瀑布流。

所以再用infinitescroll这个插件来搞定,

1:同样的导入js库

<script type="text/javascript" src="${ctx}/scripts/framework/jquery/jquery.infinitescroll.min.js"></script>

2:进行滚动条时间绑定


$('#container').infinitescroll({
	    navSelector  : '#page-nav',    //因为是动态加载数据,所以必须要有下一页的链接,这个就是可以存放一个a链接,就像                  
   	    nextSelector : '#page-nav a',  
					   //	<div id="page-nav" style="display: none;">
		                           //       <a href="下一页链接"></a>
	                                   // 	</div> 放在页面当中
 itemSelector : '.magabox', //需要布局的元素 
	    errorCallback: function(){ 
		$("#infscr-loading").css({padding:15+"px",left:46+"%"});   //出错时回调函数    
	    }, loading: { msgText : '',   //等待的文字    
		img: '/images/loading.gif',   //等待的图片    
		finishedMsg : '噢,到底了'   //出错时给出的提示    
	    } 
},function( newElements ) {      //后台可以拼装出html代码       
	$.each(newElements,function(i){      //进行遍历     
	 	t = null; var element = newElements[i]; 
		var e = $(element).css({ opacity: 0 });//先将元素隐藏
	    	var img = $(e).find("div.magabox_img a.ft_img img");
    			var imgsrc = $(img).attr("src"); // 找出图片路径
    			if(imgsrc){
    				imgReady(imgsrc,function () {    //因为有图片所以布局必须把图片高度固定才不会发生因为图片加载完之后页面发生抖动这里
								 // 用到了另外 一种插件 imgReady  用来前端在图片没有加载完就计算出图片的原有高度 也有些
								 // 网站没有把图片高度固定,暂时没有弄清楚是怎么是实现的    
    	    			var h = parseInt((this.height * 192) / this.width);       //可以根据自己网站的规格来算出需要图片显示的高度    
    	    			$(img).attr("height",h);
    	    			callBackAppend($(e));
    	    		});
    			}else{
    				callBackAppend($(e));
    			}
	    	});
	    
	    });
	
function callBackAppend($element){
	$('#container').masonry( 'appended', $element, true );//进行插入并布局
	t = setTimeout(function(){
		$element.animate({ opacity: 1 });//再进行显示
	},300);
	t = null;
}


这样的话一个“无限瀑布流”就出来了,

这是之前做过的一个例子,在这里算是总结一些,肯定有些地方还没有做的很好,不过算是可以用了。








评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值