流行的瀑布流布局效果
效果图:
<script type="text/javascript" src="jq.js"></script> <style> #main-wrap{position: relative; margin:0 auto;} .item-box{ position:absolute;left:0;top:0;padding:10px 0 0 10px;margin-left:-5px;} .item-box .pic{border-radius:5px;padding: 10px;border:1px solid #ccc;box-shadow: #ccc 0 0 5px;} .item-box .pic img{width: 160px;height:auto;} .loading{ visibility:hidden;width:200px;height:45px; margin:30px auto; background-color:#ccc; text-align:center; line-height:45px;border:1px solid #eee;border-radius:5px;} </style>
JS:
/** *瀑布流插件 *本插件局域JQ *在每次数据初始化前必须在服务器端设置好图片区域的宽高，也就是说在图片的外包装DIV上按照比例设置上宽高属性 *才能顺畅的运行在各个浏览器(因为图片在没有加载完毕前是没有宽高的) *name:杨永 *QQ:377746756 */ ;(function($){ //构建瀑布流构造函数 var WaterFlowlayout=function(iTarget,loading,settings) { //保存自身 var _this_=this; //初始配置参数 this.opts={ colSize:5 }; //如果配置了参数就扩展 settings&&$.extend(this.opts,settings); //保存瀑布流容器、初始出现在容器里面的盒子、其中一个盒子的宽度 this.insertBox=iTarget; this.insertBoxW=this.insertBox.width(); this.itemBoxs=this.insertBox.find(".item-box"); this.colW=this.itemBoxs.eq(0).outerWidth(); //保存钩子loading加载状态 this.loading=loading; this.isLoad=true; this.winHeight=$(window).height(); this.scrollTop=$(document.documentElement).offset().top||window.pageYOffset; this.timer=null; //初始化一下 this.init(); //绑定窗口事件 $(window).scroll(function(){ _this_.scrollTop=$(document).scrollTop(); _this_.isLoadingStatus(); }).resize(function(){ _this_.winHeight=$(window).height(); _this_.isLoadingStatus(); }); }; WaterFlowlayout.prototype={ isLoadingStatus:function(){//判断loading是否出现在视口中 var self=this; window.clearTimeout(self.timer); self.timer=window.setTimeout(function(){ if(self.isLoad){ if(self.loading.offset().top<(self.winHeight+self.scrollTop)){ self.isLoad=false; self.loading.css("visibility","visible"); self.opts.callBack&&self.opts.callBack(); }else{ self.loading.css("visibility","hidden"); }; }; },300); }, reloadView:function(dataList){//刷新新添加进来的元素 var self=this; //创建一组数据到里面 self.createItems(dataList); //设置下容器的宽高 self.setInsertBoxHeight(self.colsArr); //渲染完成后可以加载 self.isLoad=true; self.loading.css("visibility","hidden"); }, createItems:function(dataList){ var self=this; self.createArr=[]; /*<div class="item-box"><div class="pic"><img src="images/10.jpg"></div></div>*/ $(dataList).each(function(i, elem) { var itemBox=$('<div class="item-box" style="display:none;">'); itemBox.html('<div class="pic" style="width:'+elem.width+'px;height:'+elem.height+'px"><img src="'+elem.src+'"></div>'); self.createArr.push(itemBox); self.insertBox.append(itemBox); }); //设置位置 $(self.createArr).each(function(i,elem){ elem.fadeIn(); self.setOtherPos(self.colsArr,elem); }); }, init:function(){//设置容器的宽度、居中 var self=this; //记录一下几列 this.colSize=Math.floor(this.insertBoxW/this.colW); //设置一个数组记录 this.colsArr=[]; //将前8个元素高度插入到数组中 this.itemBoxs.each(function(i,elem){ if(i<self.colSize){//添加到数组中 self.colsArr.push($(elem).outerHeight()); $(elem).css({left:i*self.colW,top:0}); }else{ //设置剩余的元素位置 self.setOtherPos(self.colsArr,$(elem)); }; }); //设置下容器的宽高 self.setInsertBoxHeight(self.colsArr); self.insertBox.width(self.colW*self.colSize); }, setOtherPos:function(colArr,curElem){ //获取最小的值 var minV=Math.min.apply(null,colArr); var index=this.getIndex(colArr,minV); curElem.css({ top:minV, left:index*this.colW }); //重置一下原来的值 colArr[index]+=curElem.outerHeight(); }, getIndex:function(arr,val){//匹配数组中最小的值 for(var i=0;i<arr.length;i++){ if(arr[i]==val){return i;break;}; }; }, setInsertBoxHeight:function(arr){ //设置一下容器的高度 this.insertBox.height(Math.max.apply(null,arr)); } }; //注册到全局对象上 window.WaterFlowlayout=WaterFlowlayout; })(jQuery);
DOM:
<div id="main-wrap"> <div class="item-box"> <div class="pic"> <img src="images/1.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/2.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/4.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/5.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/6.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/1.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/7.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/8.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/9.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/10.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/11.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/12.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/10.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/3.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/4.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/5.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/6.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/1.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/7.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/8.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/9.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/10.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/11.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/12.jpg"> </div> </div> <div class="item-box"> <div class="pic"> <img src="images/10.jpg"> </div> </div> </div> <div id="loading" class="loading">正在加载中...</div>
创建：
var demo=new WaterFlowlayout($("#main-wrap"),$("#loading"),{ callBack:function(){ //新加载的数据 demo.reloadView([ {src:"images/16.jpg"}, {src:"images/17.jpg"}, {src:"images/18.jpg"}, {src:"images/19.jpg"}, {src:"images/20.jpg"}, {src:"images/16.jpg"} ] ); } });
