流式布局越来越流行,花瓣网、蘑菇街、点点网都在使用这种布局方式,算是凌乱中透出一种美吧。为了跟上时代大潮,我决定自己实现一个流式页面布局,做成jquery插件以满足自己装X的欲望。
该插件还相对比较简单,仅仅实现了以下特性:
1、流式布局
2、滚动条到底时动态加载
3、使用方便
缺点:
1、不支持自定义CSS(以后有空再改吧,或者谁想用谁就自己改代码好了)
2、宽度固定,暂不支持宽度设置(这个也以后再改)
demo、代码如下:
/* * waterfall,流式网页的jquery插件 * version : 0.1 * author: zhujianfeng <weibo : @fdjianfeng> <http://www.zhujianfeng.info> * * 用法: * <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script> * <script src="jquery.waterfall.js" type="text/javascript"></script> * $(function () { * $("#container").waterfall([ * { * url : "http://www.test.com/pic1.jpg", //要显示图片的缩略图地址 * jumpUrl: "http://www.someurl.com/someurl1", //点击缩略图之后的跳转地址,可不填 * title : "title1", //图片标题 * desc : "desc1", //图片描述 * meta : "meta1" //图片的其他信息,例如分类等 * },{ * url : "http://www.test.com/pic2.jpg", * jumpUrl: "http://www.someurl.com/someurl2", * title : "title2", * desc : "desc2", * meta : "meta2" * } * ]); * }); */ (function($) { /* 用于充当互斥条件, 在滚动条滚动事件中判断是否正在加载 如果有此次滚动事件就不触发新的加载 */ var flag = false; //需要用的CSS var css = { container : { "position" : "relative", "width" : "1100px", "margin" : "0 auto 25px", "padding-bottom" : " 10px" }, grid : { "display" : "none", "border" : "1px solid #ccc", "width" : "188px", "min-height" : "100px", "padding" : " 15px", "background" : "#fff", "margin" : "8px", "font-size" : "12px", "float" : "left", "box-shadow" : " 0 1px 3px rgba(34,25,25,0.4)", "-moz-box-shadow" : " 0 1px 3px rgba(34,25,25,0.4)", "-webkit-box-shadow" : " 0 1px 3px rgba(34,25,25,0.4)", "-webkit-transition" : " top 1s ease, left 1s ease", "-moz-transition" : " top 1s ease, left 1s ease", "-o-transition" : " top 1s ease, left 1s ease", "-ms-transition" : " top 1s ease, left 1s ease" }, gridStrong : { "border-bottom" : "1px solid #ccc", "margin" : "10px 0", "display" : "block", "padding" : "0 0 5px", "font-size" : "17px" }, gridMeta : { "text-align" : "right", "color" : "#777", "font-style" : "italic" }, gridP : { "display" : "block", "font-size" : "12px", "color" : "#333" }, gridImgholderImg : { "max-width" : "100%", "width" : "100%", "background" : "#ccc", "display" : "block" } }; //用于计算位置的配置项 var config = { boxWidth : 188, //每个盒子的宽度 spaceWidth : 40 //盒子之间的间隙 }; //创建一个图片盒子 var box = function(left, top, img, title, desc, meta, jumpUrl) { var htm = []; htm.push('<div class="grid" style="left: ' + left + 'px; top: ' + top + 'px; position: absolute; ">'); htm.push('<div class="imgholder" style="width:100%;">'); if (jumpUrl) { htm.push('<a href="' + jumpUrl + ' " target="_blank"><img src="' + img + '"></a>'); } else { htm.push('<img src="' + img + '">'); } htm.push('</div>'); htm.push('<strong>' + title + '</strong>'); htm.push('<p>' + desc + '</p>'); htm.push('<div class="meta">' + meta + '</div>'); htm.push('</div>'); var thisBox = $(htm.join("")); thisBox.css(css.grid); thisBox.find("img").css(css.gridImgholderImg); thisBox.find("strong").css(css.gridStrong); thisBox.find("p").css(css.gridP); thisBox.find(".meta").css(css.gridMeta); $(this).append(thisBox); return thisBox; }; //计算新图片盒子所要放置的位置 var getNewPostion = function(bottom) { var min = bottom[0]; var minPosition = 0; for (var i = bottom.length - 1; i > 0; i-- ) { if (min > bottom[i]) { min = bottom[i]; minPosition = i; } } var left = minPosition * (config.boxWidth + config.spaceWidth); var top = min; return {left: left, top: top, position: minPosition}; }; //获得最小的top值,用于判断窗口中是否已经充满图片 var getMinTop = function(bottom) { var min = bottom[0]; for (var i = bottom.length - 1; i > 0; i-- ) { if (min > bottom[i]) { min = bottom[i]; } } return min; }; //递归加载新的图片盒子 var loadBox = function(){ var me = $(this); var entities = $(this).data("entities"); var bottom = $(this).data("bottom"); var entity = entities.shift(); if (entity) { var newPostion = getNewPostion(bottom); var newBox = box.apply(me, [newPostion.left, newPostion.top, entity.url, entity.title, entity.desc, entity.meta, entity.jumpUrl]); newBox.find("img").load(function(){ newBox.fadeIn(1500); var newBoxHeight = newBox.height(); bottom[newPostion.position] += newBoxHeight + config.spaceWidth; $(this).data("bottom", bottom); $(this).data("entities", entities); if (($(window).height() + $(window).scrollTop()) > getMinTop(bottom)) { loadBox.apply(me); } else { flag = false; } }); } }; //可供外部使用的jquery方法集合 var methods = { "init" : function(opts) { var entities = opts; var bottom = [0,0,0,0,0]; var me = $(this); $(this).css(css.container); $(this).data("bottom", bottom); $(this).data("entities", entities); loadBox.apply(me); $(window).scroll(function(){ if (flag === true) { return; } flag = true; loadBox.apply(me); }); } }; //插件入口 $.fn.waterfall = function(method) { if ( methods[method] ) { return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 )); } else if ( typeof method === 'object' || ! method ) { return methods.init.apply( this, arguments ); } else { $.error( 'Method ' + method + ' does not exist' ); } }; })(jQuery);