網格化圖像，如畫布上的 Pinterest 布局

Question

我正在使用 pixi.js 創建一個交互式應用程序。 我需要將圖像以類似布局的 pinterest 形式放置在屏幕上的不同容器中，或者將它們網格化，以使它們看起來井井有條。 因為我在畫布上工作，所以像 gridify.js 這樣的插件不支持畫布，我無法找到任何插件或代碼來讓它在畫布上工作。 此外，圖像需要可點擊，所以我不能使用像 html 到畫布轉換這樣的插件，因為它們只生成圖像。

Answer 1

我通過檢查 gridify.js 邏輯找到了解決方案。 這是我的代碼：

    var items = options.items;

    var width = options.containerWidth,
    item_margin = parseInt(options.margin || 0),
    item_width = parseInt(options.max_width || options.width || 220),
    column_count = Math.max(Math.floor(width / (item_width + item_margin)), 1),
    left = column_count == 1 ? item_margin / 2 : (width % (item_width + item_margin)) / 2,
    lastHeight = 0;
    if (options.max_width) {
        column_count = Math.ceil(width / (item_width + item_margin));
        item_width = (width - column_count * item_margin - item_margin) / column_count;
        left = item_margin / 2;
    }

    for (var i = 0, length = items.length; i < length; i++) {

       var ratio = item_width / items[i].width;
        items[i].width = item_width;
        items[i].height = items[i].height * ratio;
        items[i].position.y = lastHeight + item_margin / 2;
        items[i].position.x = 0;


        lastHeight += items[i].height + (item_margin * 2);
    }

迭代所有容器並將參數傳遞給上述函數。 它將網格化容器中的圖像/內容。 我為每個容器使用了單列，但您可以使用 gridify.js 中的原始代碼使用多列