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);
    

     

  • 相关阅读:
    SQL 语言入门
    [转载]Sql Server 中的Login,Schema,User,Role之间的关系
    稀疏矩阵运算
    特征缩放的几种方法
    dp解出栈序列数
    神经网络解决多分类问题例:数字识别
    多分类例题
    fminunc 函数的用法
    二分类
    特征归一化、特征映射、正则化
  • 原文地址:https://www.cnblogs.com/bbvi/p/2592700.html
Copyright © 2011-2022 走看看