原创瀑布流插件（动态排序，滚动加载，自适应宽度）

最新推荐文章于 2022-08-19 14:14:08 发布

转载最新推荐文章于 2022-08-19 14:14:08 发布 · 138 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/bbvi/archive/2012/07/15/2592700.html

文章标签：

#javascript #json #ViewUI

本文介绍了瀑布流布局实现方式，包括代码实现细节、参数设置、以及如何通过自定义属性调整瀑布流高度。

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

你懂的：http://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);

转载于:https://www.cnblogs.com/bbvi/archive/2012/07/15/2592700.html