码迷,mamicode.com
首页 > 其他好文 > 详细

流行的瀑布流布局效果

时间:2014-09-19 15:30:05      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   java   ar   for   

效果图:

bubuko.com,布布扣

<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"}
                                                                ]
                                                        );
                                                  }
                                          });

 

流行的瀑布流布局效果

标签:style   blog   http   color   io   os   java   ar   for   

原文地址:http://www.cnblogs.com/yangliulang/p/3981403.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!