这种布局是当下比较流行的一种布局风格,大家把它叫做“瀑布流”,开始也没有接触过这种布局,使用它是因为公司网站上需要用到。所以经理布下任务要我搞定,开始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;
}
这样的话一个“无限瀑布流”就出来了,
这是之前做过的一个例子,在这里算是总结一些,肯定有些地方还没有做的很好,不过算是可以用了。