Question

我想使用像http://www.agefotostock.com/age/en/Search.aspx?perpage=20&query=lion

这样的flex css属性来构建网格图像

（使用＆＃34;行视图＆＃34;在显示选项中）

检查源代码时，我可以看到flex属性是动态的（每张图片上都不一样）。

显然，可用的最大图片数量等于390px宽度或高度（在使用flex调整大小之前）。

我在2周内通过stackoverflow，个人尝试和＆＃34; flex＆＃34;文件但没有成功。

谁能给我提供线索？如何计算比率或其他什么？

提前thx，问候!!

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知道图像的高度与所需高度的比例。

Answer 2

This小提琴接近你想要的。它根据设置的宽度调整所有图像的大小，并在调整窗口大小时移动图像。它并不完美，但它是一个良好的开端。

trWidthAllow 是您可以开始构建函数其余部分的地方。它确定窗口中可以装入的图像数量（并排）（可以将其更改为父div）。楼层值（向下舍入）以便您不会溢出（除非窗口在（填充* 2）+ maxWidth 下调整大小换句话说，图像宽度加上padding-left和padding-right值）

HTML

<div id="myDiv">
    <table>
        <tr>
            <td class="thing">
                <img src="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg">
                <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/687/cache/bonobo-congo-ziegler_68751_990x742.jpg">
                <img src="http://static6.businessinsider.com/image/51c3212a6bb3f79c2000000f/this-space-picture-changes-our-understanding-of-how-black-holes-form.jpg">
                <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/411/cache/northern-lights-picture-aurora-borealis-september-2011-yukon_41173_600x450.jpg">
            </td>
        </tr>
    </table>
</div>

CSS

table, tr, td {
    padding:0px;
    margin:0px;
    border:none;
}
#myDiv {
}
img {
    padding:5px;
    margin:0px;
}

JS

$(document).ready(function () {
var maxWidth = 390;

var windowWidth = $(window).width();
var imgPadding = parseInt($(".thing img").css("padding"), 10);
var trWidthAllow = Math.floor(windowWidth / (maxWidth + (imgPadding * 2)));
//alert(trWidthAllow);
//alert(windowWidth);
//alert(imgPadding);
var ratio;
var numImgItems = $(".thing img").length;
//alert(numImgItems);
for (var i = 0; i < numImgItems; i++) {
    var actualWidth = $(".thing img:eq(" + i + ")").width();
    var actualHeight = $(".thing img:eq(" + i + ")").height();
    ratio = actualWidth / maxWidth;
    $(".thing img:eq(" + i + ")").css({
        width: maxWidth + "px",
        height: actualHeight / ratio + "px"
    });
    //alert(actualWidth + "; " + actualHeight);
}
/*$(".thing").addClass("myClass");*/
});

使用css flex的网格图像

2 个答案: