Gridify图像像布局上的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中的原始代码