Question

在Flickr上，我发现了一个非常吸引人的探索部分：https://www.flickr.com/explore

enter image description here

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

[编辑] 如果不按照下面的答案中的建议使用砌体库，您将如何构建类似的东西？我在一些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
        }
    }
});

Answer 1

我们称之为masonary网格....你可以在这里查看。

Masonary gallery图书馆....您可以使用它来创建这样的图库。

Answer 2

虽然您可以使用自定义CSS样式来创建这样的网格，但使用响应式CSS框架（如 Bootstrap 或基础）会更快更容易

以Bootstrap为例，创建响应式网格布局非常简单。假设你想要一个像Flickr这样的页面，在那个页面上第一行应该有4个图像，第二行应该有2个，第三个应该有6个图像。当屏幕尺寸变小时，图像需要相应地堆叠和缩放。使用Bootstrap，我们可以这样做：

<div class="container">
  <div class="row">
    <div class="col-xs-4 col-md-3">
      <image src="..." alt="...">
    </div>
    <div class="col-xs-4 col-md-3">
      <image src="..." alt="...">
    </div>
    <div class="col-xs-4 col-md-3">
      <image src="..." alt="...">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-md-6">
      <image src="..." alt="...">
    </div>
    <div class="col-xs-12 col-md-6">
      <image src="..." alt="...">
    </div>
  </div>
  <div class="row">
    <div class="col-xs-4 col-md-2">
      <image src="..." alt="...">
    </div>
    <div class="col-xs-4 col-md-2">
      <image src="..." alt="...">
    </div>
    <div class="col-xs-4 col-md-2">
      <image src="..." alt="...">
    </div>
    <div class="col-xs-4 col-md-2">
      <image src="..." alt="...">
    </div>
    <div class="col-xs-4 col-md-2">
      <image src="..." alt="...">
    </div>
    <div class="col-xs-4 col-md-2">
      <image src="..." alt="...">
    </div>
  </div>
</div>

其中.row是图像行，.col-*-*类是适当的列。您可以在此处了解有关Bootstrap的更多信息：http://getbootstrap.com/

希望能回答你的问题。

响应式网格的不同大小的图像

2 个答案:

虽然您可以使用自定义CSS样式来创建这样的网格，但使用响应式CSS框架（如 Bootstrap 或基础）会更快更容易