Question

所以我正在创建一个网站，其中包含一个不同大小的平铺图块。我编写了javaScript，它包含了tile，列数和行数。然后，它会创建一个网格，并在网格中完美地匹配瓷砖，并用小的一块瓷砖填充任何备用空间。我得到的结果是一个大小的瓷砖阵列和基于列数和行数的cooridantes，例如，

        blocks = [
        {
            element: $('<div class="large"></div>'),
            width: 3,
            height: 2,
            yPos: 0,
            xPos: 0
        },
        {
            element: $('<div class="medium"></div>'),
            width: 2,
            height: 2,
            yPos: 0,
            xPos: 3
        },
        {
            element: $('<div class="small"></div>'),
            width: 1,
            height: 1,
            yPos: 0,
            xPos: 6
        },
        {
            element: $('<div class="small"></div>'),
            width: 1,
            height: 1,
            yPos: 2,
            xPos: 0
        }
    ]

实际的数组中有更多，并且会形成一个完美的网格，没有空白区域并且沿着底部笔直。

我现在需要以某种方式将其打印到屏幕上。我起初使用了一个表，通过使用行数和列数属性，我可以创建一个完美的网格，我需要的大小。唯一的问题是我希望它能够响应并根据屏幕大小更改列数。我真的很喜欢打包这样做。我以为我可以使用pkery.fit（）通过设置坐标并传递一个元素来实现我想要的东西，但它似乎不会那样工作。现在有没有人，如果我可以做我想用Packery实现的目标？我也使用百分比大小来提高响应速度。

Answer 1

所以最后我想出了一个解决方案，我拿出了我的瓷砖对象数组，然后我按照Y坐标给它们排序：

    function organizeByPosition(){
    addedBlocks.sort(function sortByPosition(a, b){
        if (a.positionY == b.positionY) return a.positionX - b.positionX;
            return a.positionY - b.positionY;
        })
    }

现在我所要做的就是使用packery以这个顺序附加这些项目，并且packery似乎按预期布局：

    var elements = [];

    for(var i = 0; i < blocks.length; i++){
        if(blocks[i].getWidth() == 3){
            elements.push($('<div class="grid-item grid-item--width3"></div>').append('<div class="content"></div>'));
        }
        if(blocks[i].getWidth() == 2){
            elements.push($('<div class="grid-item grid-item--width2"></div>').append('<div class="content"></div>'));
        }
        if(blocks[i].getWidth() == 1){
            elements.push($('<div class="grid-item"></div>').append('<div class="content"></div>'));
        }
    }

    var displayGrid = $('.grid');
    displayGrid.packery( args2 );
    for(var i = 0; i < elements.length; i++) {
        displayGrid.append(elements[i]).packery('appended', elements[i]);
    }

当我想要适应某些坐标时，我似乎正在过度思考。至少我的代码没有浪费，因为它是一个完美的方式来获得顺序附加元素以获得一个完美的网格，没有完美的矩形/正方形的空格。另外，当我编写的代码生成随机网格时，我会在每次刷新时以不同的顺序获取切片，这就是我的目的

Packery JS带有预定义的网格

1 个答案: