zoukankan      html  css  js  c++  java
  • 原创 瀑布流插件(动态排序,滚动加载,自适应宽度)

    代码很简单  有兴趣可以自行修改

    你懂的:https://files.cnblogs.com/bbvi/jquery.Waterfall.zip

    //watefallHeight 瀑布流高度    也可以通过$watefallHeight获得
                    var watefallHeight = $("#galleryContainer").Watefall(
                    {
                        itemMarginLeft: 20,//左间距
                        itemMarginTop: 20,//上间距
                        sortName: "",//排序字段
                        asc_desc:false//排序
                    });
    /// <reference path="jquery.js"/>
    /*
    * Watefall
    * version: 1.0.0  2012-7-14
    * @ jQuery v1.2.*
    *
    * ssy
    */
    (function ($) {
        $.extend($.fn, {
            Watefall: function (setting) {
                if (typeof (setting) == "undefined") {
                    setting = window.$CacheSetting;
                }
    
                var ps = $.extend({
                    itemMarginLeft: 20,
                    itemMarginTop: 20,
                    sortName: "",
                    asc_desc: false
                }, setting);
    
    
    
                window.$CacheSetting = ps;
    
                var itemWidth = this.children().eq(0).width(); //其中一个孩子的宽度
                var rowsCount = parseInt(this.width() / (itemWidth + ps.itemMarginLeft)); //共多少列
                var itemNum = this.children().length; //多少个孩子
    
    
                var sortList = new Array();
                this.children().each(function (i) {
                    sortList.push({ "index": parseInt(i), "sorts": ps.sortName == "" ? i : parseInt($(this).attr(ps.sortName)) });
                });
    
    
                window.$JsonSort = function (json, asc_desc) {
                    return json.sort(function (a, b) { return a.sorts > b.sorts ? -1 * asc_desc : 1 * asc_desc; }); //升序
                }
    
                $JsonSort(sortList, ps.asc_desc == true ? "1" : "-1");
    
                this.children().css('position', 'absolute');
                var itemLeft = 0;
                var itemTop = 0;
                var itemHeightList = new Array();
                var shortHeigth = 0;
                var shortRow = 0;
                var itemObj;
    
                for (var i = 0; i < sortList.length; i++) {
                    itemObj = this.children().eq(sortList[i].index);
                    if (i < rowsCount) {
                        itemTop = ps.itemMarginTop;
                        itemLeft = (i % rowsCount) * (ps.itemMarginLeft + itemWidth);
                        itemHeightList[i % rowsCount] = itemTop + itemObj.height();
                    } else {
                        shortHeigth = itemHeightList[0];
                        shortRow = 0;
                        for (var r = 0; r < itemHeightList.length; r++) {
                            if (shortHeigth > itemHeightList[r]) {
                                shortHeigth = itemHeightList[r];
                                shortRow = r;
                            }
                        }
                        itemTop = shortHeigth + ps.itemMarginTop;
                        itemLeft = shortRow * (itemWidth + ps.itemMarginLeft);
                        itemHeightList[shortRow] += itemObj.height() + ps.itemMarginTop;
                    }
                    itemObj.stop().animate({ 'left': itemLeft, 'top': itemTop }, 1000);
                }
                window.$watefallHeight = itemHeightList[shortRow];
                return itemHeightList[shortRow];
            }
        })
    })(jQuery);
    

     

  • 相关阅读:
    未登录词识别方法研究公布硕士论文最新进展五(2007.4.26)
    公布硕士论文最新进展一(2007.3.6)
    对于切分歧义以及识别未登录词的随想公布硕士论文最新进展四(2007.4.13)
    一则杂感一次医院项目的感悟
    公布硕士论文最新进展三(2007.3.26)
    毕业典礼7.1
    家乡风光
    还在深圳!
    经历摩托罗拉
    又回来了,南京!
  • 原文地址:https://www.cnblogs.com/bbvi/p/2592700.html
Copyright © 2011-2022 走看看