瀑布流插件（动态排序，滚动加载）

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

 

 

 

插件地址：https://files.cnblogs.com/yonge/jquery.Waterfall.zip