javascript - 梅森和重复填充块

Question

更新为使用填充块一次且不再重复。（# https://github.com/DrewDahlman/Mason更新）

我怎样才能在液体布局中应用它？

我想动态填充块我如何知道将创建多少块？

Answer 1

我遇到过同样的问题。最后稍微修改了源代码（填充函数）：

/*
 * Create filler blocks to seal up empty spaces based on matrix
 * This goes column by column to analyze true / false booleans in matrix
 */
var fillerCnt = 0;//ADDED
var fillerElements = $(settings.filler.itemSelector);//ADDED

for (var i = 0; i < elements.matrix.length; i++) {
    for (var c = 0; c < elements.matrix[i].length; c++) {

        /*
         * Blank space detected
         */
        if (elements.matrix[i][c] == false) {

            // get block dimensions
            var h = parseFloat(elements.block.height),
                w = parseFloat(elements.block.width);

            // determine position
            var x = parseFloat((i * h).toFixed(2)) + settings.gutter,
                y = parseFloat((c * w)) + settings.gutter,
                ran, filler;


            h = h - (settings.gutter * 2);
            w = w - (settings.gutter * 2);

            ran = Math.floor(Math.random() * $(settings.filler.itemSelector).length);

            if (fillerCnt >= fillerElements.length) fillerCnt = 0;//ADDED

            filler = $(fillerElements).eq(fillerCnt).clone();//CHANGED
            fillerCnt++;//ADDED

            filler.addClass(settings.filler.filler_class);
            filler.css({
                'position': 'absolute',
                'top': x + 'px',
                'left': y + 'px',
                'height': h + 'px',
                'width': w + 'px',
                'margin': '0px'
            });

            filler.appendTo($self);
        }
    }
}

只有在没有未使用的剩余时才会开始重复填充。