javascript - 不同尺寸图像的自适应网格

Closed. This question is off-topic。它当前不接受答案。
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            想改善这个问题吗？ Update the question，所以它是on-topic，用于堆栈溢出。
                        
                        4年前关闭。
                                                                                            
                
        
在Flickr上，我发现了非常有趣的探索部分：https://www.flickr.com/explore



这是一个很好的解决方案，可以显示不同大小的图片，如果您调整浏览器窗口的大小，所有行都将适应布局。

[编辑]
如果不使用下面答案中建议的砌体库，您将如何构建类似的东西？
我在一些javascript伪代码上做了一些工作，我认为逻辑应该全都存在。您对此有何看法？如何在工作库中翻译？

var rowWidhtPx=document.getElementById('gridContainer').offsetWidth;;
var maxRowHeightPX= 300;
var minRowHeightPX= 200;

var imageArray=[
    {
        src:'somesrc',
        width:200,
        height:300,
    },
    ...
    ,{
        src:'somesrc',
        width:200,
        height:300,
    }
];
var rowMatrix;
var rowsIndex=0;
rowMatrix[rowsIndex].setHeight(maxRowHeightPX);
imageArray.forEach(function (img,index){
    img.scaleHeight(maxRowHeightPX);

    if(rowMatrix[rowsIndex].actualWidth+img.widht<=rowWidhtPx){
        rowMatrix[rowsIndex].push(img);//set margin gutter to prev image
    }else{
        rowMatrix[rowsIndex].scaleHeight(minRowHeightPX) ;//scale also image heights
        if(rowMatrix[rowsIndex].actualWidth+img.scaleHeight(minRowHeightPX)<=rowWidhtPx ){
            rowMatrix[rowsIndex].push(img);
        }else{
            rowMatrix[rowsIndex].setOptimalHeight();
            //starting from minimum height, take total widht and set it to rowWidthPX, and scale the height accordingly
            //then takes single images and set also the height
            rowsIndex++; // add new row
        }
    }
});

最佳答案

我们称其为砖石网格....您可以在此处进行检查。

Masonary gallery库....您可以使用它来创建类似的库。