html - 使用 css flex 网格图像

Question

我想使用 flex css 属性构建网格图像，如 http://www.agefotostock.com/age/en/Search.aspx?perpage=20&query=lion

(在显示选项中使用“行 View ”)

在检查源代码时，我可以看到 flex 属性是动态的(每张图片都不相同)。

显然，可用的最大图片宽度或高度等于 390px(在使用 Flex 调整大小之前)。

我通过 stackoverflow、个人尝试和“flex”文档寻找了 2 周，但没有成功。

有人可以给我线索吗？如何计算比率或其他什么？

提前致谢，问候!!

Answer 1

经过一些研究(和大量咖啡)，我似乎发现了一些有趣的东西

看一下代码 HTML:

<div id="masonry">
  <div><img class="item" data-width="600" data-height="804" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></div>
  <div><img class="item" data-width="600" data-height="791" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></div>
  <div><img class="item" data-width="600" data-height="804" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></div>
  <div><img class="item" data-width="600" data-height="791" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></div>
  <div><img class="item" data-width="1000" data-height="579" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650"src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="700" data-height="932" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg"></div>
  <div><img class="item" data-width="1000" data-height="724" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg"></div>
  <div><img class="item" data-width="1000" data-height="579" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="700" data-height="932" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg"></div>
  <div><img class="item" data-width="1000" data-height="724" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg"></div>
  <div><img class="item" data-width="1000" data-height="600" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg"></div>
  <div><img class="item" data-width="600" data-height="799" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg"></div>
  <div><img class="item" data-width="600" data-height="804" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></div>
  <div><img class="item" data-width="600" data-height="791" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></div>
  <div><img class="item" data-width="1000" data-height="579" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="600" data-height="804" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></div>
  <div><img class="item" data-width="600" data-height="791" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></div>
  <div><img class="item" data-width="1000" data-height="579" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650"src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="700" data-height="932" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg"></div>
  <div><img class="item" data-width="1000" data-height="724" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg"></div>
  <div><img class="item" data-width="1000" data-height="600" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg"></div>
  <div><img class="item" data-width="600" data-height="799" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg"></div>    
</div>

CSS:

div#masonry { 
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -webkit-align-items: stretch;
    -webkit-justify-content: space-around;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
}
div#masonry img {  
    position: static !important;
    bottom: auto !important;
    width: 100%;
    display: block;
    height: auto;
} 

#masonry div{
    display: -webkit-flex;
    -webkit-align-items: flex-end;
    -webkit-justify-content: space-around;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    width: 100%;
    height: auto;
    position: relative;
    margin-right: 5px;
    margin-left:5px;
    margin-bottom: 10px;
    float: left;
}

#masonry:after {
    -ms-flex: 20 150px;
    -webkit-flex: 20 150px;
    flex: 20 150px;
    display: block;
    content: ' ';
    height: 1px;
}

@media only screen and (min-width: 1200px){
    #masonry:after {
        -ms-flex: 500 300px;
        -webkit-flex: 500 300px;
        flex: 500 300px;
    }
}
@media only screen and (min-width: 992px){
    #masonry:after {
        -ms-flex: 100 250px;
        -webkit-flex: 100 250px;
        flex: 100 250px;
    }
}
@media only screen and (min-width: 768px){
    #masonry:after {
        -ms-flex: 50 200px;
        -webkit-flex: 50 200px;
        flex: 50 200px;
    }
}

JS(使用jquery):

 $(document).ready(function(){
      var o = {};
      $("#masonry img").each(function(){
           o.base = parseInt($(this).data("width"),10)/parseInt($(this).data("height"),10);

           o.grow = Math.round(o.base*1e3)/100;
           o.h    = Math.round(190*o.base);

           $(this).parent().css("flex",o.grow+" "+o.h+"px");
           $(this).parent().css("min-height",Math.round(o.h/o.base));
      });
 });

codepen

无论方向和尺寸如何，图像在行中具有相同的高度。

一点点 JavaScript 来了解图像所需高度的比例，仅此而已。