带有预定义网格的Packey JS

Packery JS with a predefined grid

本文关键字：Packey JS 网格 预定义      更新时间：2023-09-26

所以我正在制作一个网站，它有一个带有不同大小瓦片的平铺页面。我写了javaScript，它接受瓦片、列数和行数。然后，它创建一个网格，并将瓷砖完美地放在网格中，并用一块小瓷砖填充所有空闲空间。我得到的是一个瓷砖阵列，大小和坐标基于列和行的数量，例如

        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（）来实现我想要的，通过设置坐标并向它传递一个元素，但它似乎不起作用。如果我能和帕克一起实现我想要实现的目标，现在有人愿意吗？我也在使用百分比大小，使其反应更灵敏。

所以最后我找到了一个解决方案，我取我的瓦片对象数组，并根据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]);
    }

当我想适应某些坐标时，我似乎想得太多了。至少我的代码没有浪费，因为这是一种完美的方式来获得添加元素的顺序，以获得一个没有空格的完美网格，这是一个完美的矩形/正方形。此外，当我编写的代码生成一个随机网格时，我在每次刷新时都会以不同的顺序获得瓦片，这就是我对的追求

相关文章：