【网站】图片的单行并列排版实现

排列如下图所示，能够根据图片的宽度，自动获取图片占比，在保证图片宽高比的同时让图片在同一行排列。

具体实现：

主要的HTML：

//H5
<div class="photos">
<img src="..." />
<img src="..." />
<img src="..." />
</div>

主要的CSS，这里采用了Flex布局。

//CSS
<style>
div.photos {
    display: flex;
    flex-wrap: wrap;
}
figure.photo {
    margin: 2.5px;
}
.photo img {
width: 100%;
    left:0;
    right: 0;
}
</style>

图片的宽度占比获取采用了浅笑博客提供的方法：“由于每个图片块需要有相同的高度，所以每个图片块分配到的宽度之间的比例应该和每张图片的宽长比之间的比例相同。所以我们直接将每张图片的宽长比作为该图片块的flex-grow，这样就实现了所有图片块高度相同”。使用JQuery来获取。相关代码如下：

//JS
<script>
jQuery('img').each(function(i, item){
    var img = new Image();
    img.onload = function () {
        var w = img.width;
        var h = img.height;
        console.log(w,h);
        jQuery(item).parent().css('flex', (w * 50 / h) + ' 1 0%');
    };
    img.src = jQuery(item).attr('src');
})
</script>
</div>

实现结束。

end...