如何以马赛克样式对齐图像？ html / css [英] How to align images in a mosaic style? html/css

问题描述

我想包含一组马赛克样式的图像，这些图像全部通过HTML5 / CSS分组在一起。我还使用Bootstrap和各种行，列和div来组织和定位内容-但是我无法将图像分组在一起。我已经能够将它们调整到一定程度，即使它们仍然不匹配，等等。请参阅附件中的图像以了解我要达到的目标。

I would like to include a mosaic style set of images that all group together via HTML5/CSS. I am also using Bootstrap and various rows, columns and div's to structure and position the content - however i am unable to group my images together. I have been able to align them to am extent they are still mismatched etc. Please see the attached image for what i am trying to achieve.

有什么想法吗？

推荐答案

使用masonary.js

Use masonary.js

http://masonry.desandro.com/

或者您可以编写自己的js函数。在这里可以找到非常好的资源（引起这种疯狂的家伙的回答，这是pinterest的前端开发人员）：
http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest- coms-absolute-div-stacking-layout

Or you could code your own js function. A really good resource can be found here (an answer by the fellow who started this madness, a front-end dev for pinterest): http://www.quora.com/Pinterest/What-technology-is-used-to-generate-pinterest-coms-absolute-div-stacking-layout

当前，您可以使用css3列使用css进行此操作。看看这里的示例（尽管这不能完全解决您的布局问题）：

Currently, you can do this with css, using css3 column. Take a look at the example here (although this does not solve for your layout exactly):

http://jsfiddle.net/jalbertbowdenii/7Chkz/

    -moz-column-count:3;
    -moz-column-gap: 3%;
    -moz-column-width: 30%;
    -webkit-column-count:3;
    -webkit-column-gap: 3%;
    -webkit-column-width: 30%;
    column-count: 3;
    column-gap: 3%;
    column-width: 30%;

这篇关于如何以马赛克样式对齐图像？ html / css的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！