twitter-bootstrap 如何以马赛克风格对齐图像？html/css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22334923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align images in a mosaic style? html/css
提问by user2904529
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.
我想包含一组马赛克样式的图像，这些图像都通过 HTML5/CSS 组合在一起。我还使用 Bootstrap 和各种行、列和 div 来构建和定位内容 - 但是我无法将我的图像组合在一起。我已经能够将它们对齐到它们仍然不匹配等的程度。请参阅所附图片了解我想要实现的目标。
Any ideas please?
请问有什么想法吗？
回答by superUntitled
Use masonary.js
使用 masonary.js
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
或者您可以编写自己的 js 函数。可以在这里找到一个非常好的资源（发起这种疯狂的人的回答，pinterest 的前端开发人员）：http://www.quora.com/Pinterest/What-technology-is-used-to- 生成-pinterest-coms-absolute-div-stacking-layout
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):
目前，您可以使用 css3 列来执行此操作。看看这里的例子（虽然这并不能完全解决你的布局）：
http://jsfiddle.net/jalbertbowdenii/7Chkz/
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%;
回答by patilswapnilv
You can style the elements to match them as you want in the mosaic style. I did not need JS for this. Probably it would be easier using JS.
您可以根据需要在马赛克样式中设置元素的样式以匹配它们。我不需要 JS 为此。使用JS可能会更容易。
Here is an example of how this can be done.
这是如何做到这一点的示例。
/* ========================================================================*/
/* ! VARIABLES */
/* ========================================================================*/
// BRICK DECLINAISON
$color-brick: #FF8357;
// BLUE DECLINAISON
$color-blue: #4398b7;
// YELLOW DECLINAISON
$color-yellow: #FFDD57;
// INDIGO DECLINAISON
$color-indigo: #83C7D4;
// ANTHRACITE DECLINAISON
$color-anthracite: #414A53;
// GREEN DECLINAISON
$color-green: #87C97F;
/* ========================================================================*/
/* ! TYPO */
/* ========================================================================*/
/* --------------------------------------------*/
/* ! COMPOSANTS */
/*---------------------------------------------*/
.bloc {
color: #FFF;
}
/* ========================================================================*/
/* ! MIXINS & HELPER CLASS */
/* ========================================================================*/
/* --------------------------------------------*/
/* ! HELPER CLASSES */
/*---------------------------------------------*/
.brick {
background-color: $color-brick;
}
.blue {
background-color: $color-blue
}
.yellow {
background-color: $color-yellow;
}
.indigo {
background-color: $color-indigo;
}
.anthracite {
background-color: $color-anthracite;
}
.green {
background-color: $color-green;
}
.no-padding {
padding: 0!important;
}
.no-padding-horizontal {
padding-left: 0!important;
padding-right: 0!important;
}
/* --------------------------------------------*/
/* ! DECORATION & EFFECTS */
/*---------------------------------------------*/
@mixin box-shadow-blur($blur-value) {
box-shadow: 0px 0px $blur-value 0px rgba(0, 0, 0, 0.20);
}
/* ========================================================================*/
/* ! LAYOUT */
/* ========================================================================*/
.section-mosaic {
margin-top: 35px;
}
.section-mosaic + .section-mosaic {
margin-top: 0;
}
/* ========================================================================*/
/* ! COMPOSANTS */
/* ========================================================================*/
/* --------------------------------------------*/
/* ! MOSAIC */
/*---------------------------------------------*/
.col-small-high-bloc {
.row .bloc-small {
bottom: 0;
}
.bloc-small-parent + .bloc-small-parent {
top:15px; bottom: 7.5px;
}
.row .bloc-small {
top:21.5px; bottom: 0;
}
}
/* --------------------------------------------*/
/* ! BLOCS MOSAIC */
/*---------------------------------------------*/
.bloc {
@include box-shadow-blur(5px);
}
.bloc-big-parent {
.bloc-big {
position: absolute;
top: 15px; right: 15px; bottom: 15px; left: 15px;
}
&::before {
content: "";
display: block;
height: 0;
padding-bottom: 68.8%;/*DEFINI LA HAUTEUR DU BLOC*/
}
}
.bloc-high-parent {
.bloc-high {
position: absolute;
top: 15px; right: 15px; bottom: 15px; left: 15px;
}
&::before {
content: "";
display: block;
height: 0;
padding-bottom: 145.5%;/*DEFINI LA HAUTEUR DU BLOC*/
}
}
.bloc-small-parent {
.bloc-small {
position: absolute;
top: 15px; right: 15px; bottom: 0; left: 15px;
}
&::before {
content: "";
display: block;
height: 0;
padding-bottom: 67%;/*DEFINI LA HAUTEUR DU BLOC*/
}
}
// SINGULARITES BLOCS RESPONSIVE LAPTOP
@media (min-width: 992px) and (max-width: 1199px) {
.bloc-big-parent::before {
padding-bottom: 69.15%;/*DEFINI LA HAUTEUR DU BLOC*/
}
.bloc-high-parent::before {
padding-bottom: 148%;/*DEFINI LA HAUTEUR DU BLOC*/
}
.bloc-small-parent::before {
padding-bottom: 67%;/*DEFINI LA HAUTEUR DU BLOC*/
}
}
// SINGULARITES BLOCS RESPONSIVE TABLETTE
@media (min-width: 768px) and (max-width: 991px) {
.bloc-big-parent::before {
padding-bottom: 66.05%;/*DEFINI LA HAUTEUR DU BLOC*/
}
.bloc-high-parent {
.bloc-high {
top: 45px;
}
&::before {
padding-bottom: 93.6%/*DEFINI LA HAUTEUR DU BLOC*/
}
}
.bloc-small-parent::before {
padding-bottom: 64.92%;/*DEFINI LA HAUTEUR DU BLOC*/
}
}
// SINGULARITES BLOCS RESPONSIVE SMARTPHONE
@media (max-width: 767px) {
.bloc-big-parent::before {
padding-bottom: 66.05%;/*DEFINI LA HAUTEUR DU BLOC*/
}
.bloc-high-parent {
.bloc-high {
top: 45px;
}
&::before {
padding-bottom: 73.796%/*DEFINI LA HAUTEUR DU BLOC*/
}
}
.bloc-small-parent::before {
padding-bottom: 64.92%;/*DEFINI LA HAUTEUR DU BLOC*/
}
} <section class="mosaic-1 section-mosaic mosaic-decroissante">
<div class="container">
<div class="row row-1">
<div class="col-xs-12 col-sm-9 col-md-6 bloc-parent bloc-big-parent">
<div class="bloc-big bloc blue">
</div>
<!-- END bloc-big -->
</div>
<!-- END bloc-big-parent -->
<div class="col-xs-12 col-sm-3 col-md-6 col-small-high-bloc no-padding-horizontal">
<div class="col-xs-12 col-md-6 col-small-bloc no-padding-horizontal">
<div class="col-xs-12 bloc-parent bloc-small-parent">
<div class="bloc-small bloc anthracite">
</div>
<!-- END bloc-small -->
</div>
<!-- END bloc-small-parent -->
<div class="col-xs-12 bloc-parent bloc-small-parent">
<div class="bloc-small bloc brick">
</div>
<!-- END bloc-small -->
</div>
<!-- END bloc-small-parent -->
</div>
<div class="col-xs-12 col-md-6 bloc-parent bloc-high-parent">
<div class="bloc-high bloc indigo">
</div>
<!-- END bloc-high -->
</div>
<!-- END bloc-high-parent -->
</div>
<!-- END col-small-high --> </div>
<!-- END row-1 -->
</div>
<!-- END container -->
</section>
<!-- END mosaic-2 -->
<section class="mosaic-2 section-mosaic mosaic-croissante">
<div class="container">
<div class="row row-1">
<div class="col-xs-12 col-sm-3 col-md-6 col-small-high-bloc no-padding-horizontal">
<div class="col-xs-12 col-md-6 col-small-bloc no-padding-horizontal">
<div class="col-xs-12 bloc-parent bloc-small-parent">
<div class="bloc-small bloc brick">
</div>
<!-- END bloc-small -->
</div>
<!-- END bloc-small-parent -->
<div class="col-xs-12 bloc-parent bloc-small-parent">
<div class="bloc-small bloc indigo">
</div>
<!-- END bloc-small -->
</div>
<!-- END bloc-small-parent -->
</div>
<div class="col-xs-12 col-md-6 bloc-parent bloc-high-parent">
<div class="bloc-high bloc yellow">
</div>
<!-- END bloc-high -->
</div>
<!-- END bloc-high-parent -->
</div>
<!-- END col-small-high -->
<div class="col-xs-12 col-sm-9 col-md-6 bloc-parent bloc-big-parent">
<div class="bloc-big bloc green">
</div>
<!-- END bloc-big -->
</div>
<!-- END bloc-big-parent -->
</div>
<!-- END row-1 -->
</div>
<!-- END container -->
</section>
<!-- END mosaic-2 -->I hope you find this helpful. Please share your comments to know if there is a better way to do this, also let me know if you found this useful.
我希望你觉得这有帮助。请分享您的意见，以了解是否有更好的方法来做到这一点，如果您觉得这有用，也请告诉我。
Peace!
和平！
