我想使用像http://www.agefotostock.com/age/en/Search.aspx?perpage=20&query=lion
这样的flex css属性来构建网格图像(使用"行视图"在显示选项中)
检查源代码时,我可以看到flex属性是动态的(每张图片上都不一样)。
显然,可用的最大图片数量等于390px宽度或高度(在使用flex调整大小之前)。
我在2周内通过stackoverflow,个人尝试和" flex"文件但没有成功。
谁能给我提供线索?如何计算比率或其他什么? 提前thx,问候!!答案 0 :(得分:3)
经过一些研究(以及很多咖啡),似乎我找到了一些有趣的东西
看看代码 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));
});
});
无论方向和尺寸如何,图像都具有相同的高度。
一点点javascript知道图像的高度与所需高度的比例。
答案 1 :(得分:0)
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");*/
});