jquery实现瀑布流的方式

jquery瀑布流实现的形式多种 今天自己无聊写的一个小demo 废话不多说 上码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>jquery 实现瀑布流效果</title>

<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
    <div id="content"></div>
    <div id="loader"></div>    
</body>
</html>

下面是js代码 

/**
    *瀑布流的效果插件的形式
    */
    ;(function($,window,document,undefined){
        function Waterfall(ele,opt){
            this.defaults = {
                'container':ele,//容器
                'width':200,    
                'ispace':10,
                'url':'http://www.wookmark.com/api/json/popular?callback=?'        
            }
            this.setings = $.extend({},this.defaults,opt);
            this.iCells = 0;//总共多少列
            this.outerWidth = this.setings.width + this.setings.ispace;
            this.iPage = 0;
            this.arrT = [];
            this.arrL = [];
            //this.sUrl = 'http://www.wookmark.com/api/json/popular?callback=?';
            this.iBtn = true;
        }
        Waterfall.prototype = {
            'init':function(){
                    this.getCell();
                    this.setTop();
                    this.getData();    
                    this.scroll();    
                    this.resize();        
            },
            'getCell':function(){//获取总共的列数
                    this.iCells = Math.floor($(window).width()/this.outerWidth);    
                    if(this.iCells<2){
                        this.iCells = 3;
                    }else if(this.iCells>8){
                        this.iCells = 8;
                    }
                    this.setings.container.width(this.iCells*this.outerWidth-10);
            },
            'setTop':function(){//计算每列的left 和 top
                for(var i=0;i<this.iCells;i++){
                    this.arrT[i] = 0;
                    this.arrL[i] = i*this.outerWidth;
                }
            },
            'getData':function(){//获取数据
                var _this = this;
                if(!this.iBtn) return;
                this.iBtn = false;
                this.iPage++;
                console.log(this.setings.url);
                $.getJSON(this.setings.url,{page:this.iPage},function(data){
                    $.each(data,function(index,obj){
                        var $img = $('<img />');
                        //console.log(_this.setings.width);
                        var iHeight = obj.height*(_this.setings.width/obj.width);
                        $img.css({
                            'width':_this.setings.width,
                            'height':iHeight
                        });
                        var _index = _this.getMin();
                        $img.css({
                            'left':_this.arrL[_index],
                            'top':_this.arrT[_index]
                        })
                        var objImg = new Image();
                        objImg.onload = function(){
                            $img.attr('src',this.src);
                        }
                        objImg.src = obj.preview;
                        _this.setings.container.append($img);
                        _this.arrT[_index] += iHeight+10;        
                        _this.iBtn = true; 
                    });
                });
            },
            'getMin':function(){//获取最小值
                var Min = this.arrT[0];
                var _index = 0;
                for(var i=0;i<this.arrT.length;i++){
                    if(this.arrT[i]<Min){
                        Min = this.arrT[i];
                        _index = i;
                    }
                }
                return _index;
            },
            'scroll':function(){//滚轮的事件
                var _this = this;
                $(window).on('scroll',function(){
                    var iH = $(window).height() + $(window).scrollTop();
                    var _index = _this.getMin();
                    if(_this.arrT[_index]+50<iH){//当最小列数的top 小于 可视窗口+滚动的距离时加载一页数据
                        _this.getData();
                    }    
                });
            },
            'resize':function(){    
                var _this = this;
                $(window).on('resize',function(){
                    var oldlen = _this.iCells;        
                    _this.getCell();
                    if(_this.iCells==oldlen){
                        return;
                    }
                    
                    _this.arrT = [];
                    _this.arrL = [];
                    for(var i=0;i<(_this.iCells);i++){
                        _this.arrT[i] = 0;;
                        _this.arrL[i] = i*(_this.outerWidth);
                    }
                    var _index;
                    console.log(_this.arrL);
                    _this.setings.container.find('img').each(function() {
                        _index = _this.getMin();
                        $(this).stop().animate({
                            'left':_this.arrL[_index],
                            'top' :_this.arrT[_index]
                        },1000);
                        _this.arrT[_index]+=$(this).height()+10;
                    });            
                
                });
            }
        }
        
        $.fn.waterfall = function(options){
            var oWaterFall = new Waterfall(this,options);
            return oWaterFall.init();
        }
                
    })(jQuery,window,document);

瀑布流执行方式简单的插件调用

$(function(){
        $('#content').waterfall({
            'width':300,
            'ispace':30,
            'url':'http://www.wookmark.com/api/json/popular?callback=?'
        });
    });

第一次写这样的博客 欢迎大家吐糟 

posted @ 2014-10-18 11:27  城市码农  阅读(275)  评论(0)    收藏  举报