JS實現的圖片瀑布流

(function ($) {
    $.fn.niceWall = function (options) {
        $.fn.niceWall.defaults = {
            "wrap": "body",
            "width": 200,
            "gap": 10,
            "url": "",
            "count": null,
            "callback": null
        };
        var opts = $.extend({}, $.fn.niceWall.defaults, options || {});
        //
        return this.each(function () {
            var $this = $(this);
            var colspanW = opts.width + opts.gap;
            var arrX = [];
            var arrY = [];
            var iPage = 0;
            var iBtn = true;
            var colspan = Math.floor($(opts.wrap).innerWidth() / colspanW);
            //
            function setLayer() {
                colspan = Math.floor($(window).innerWidth() / colspanW);
                $this.css("width", colspanW  colspan - opts.gap);
                for (var i = 0; i < colspan; i++) {
                    arrX[i] = colspanW  i;
                    arrY[i] = 0;
                }
            };
            setLayer();
            //
            function render() {
                if (!iBtn) return;
                iPage++;
                iBtn = false;
                $.getJSON(opts.url, { page: iPage }, function (data) {
                    $.each(data, function (index, element) {
                        console.log(element)
                        var oDiv = $("<div class='nice-wall'><p></p></div>");
                        var oImg = $("<img>");
                        var iH = (element.height / element.width) * opts.width;
                        oDiv.css({
                            "position": "absolute",
                            "width": opts.width + "px",
                            "height": iH + "px"
                        });
                        var _index = getMin();
                        oDiv.css({
                            "left": arrX[_index] + "px",
                            "top": arrY[_index] + "px"
                        });
                        arrY[_index] += iH + opts.gap;
                        //
                        oDiv.append(oImg);
                        $this.append(oDiv);


                    var hookImg = new Image();
                    hookImg.src = element.preview;
                    hookImg.onload = function () {
                        oImg.attr({
                            "src": this.src,
                            "href": element.image
                        });
                    };
                    //
                    iBtn = true;

                });
                //
                if (opts.callback) {
                    opts.callback();
                }
            });
        };
        render();
        //
        function getMin() {
            var v = arrY[0];
            var _index = 0;
            for (var i = 1; i < arrY.length; i++) {
                if (arrY[i] < v) {
                    v = arrY[i];
                    _index = i;
                }
            }
            return _index;
        };
        //
        $(window).off("scroll", srcollFn).on("scroll", srcollFn);
        //
        function srcollFn() {
            var stp = $(window).scrollTop() + $(window).innerHeight();
            var dH = $(document).height();
            var _index = getMin();
            if (arrY[_index] + 50 < stp) {
                render();
            }
        };

        //
        $(window).on("resize", function () {
            arrX = [];
            arrY = [];
            setLayer();
            //
            $this.find(".nice-wall").each(function () {
                var _index = getMin();
                $(this).animate({
                    "left": arrX[_index] + "px",
                    "top": arrY[_index] + "px"
                }, 400);
                arrY[_index] += $(this).height() + opts.gap;
            });
        });
    });
}

})(jQuery);</pre>