如何以马赛克风格对齐图像？ html/css答案

【问题标题】：How to align images in a mosaic style? html/css如何以马赛克风格对齐图像？ html/css
【发布时间】：2014-04-15 14:35:15
【问题描述】：

我想包含一组马赛克样式的图像，这些图像都通过 HTML5/CSS 组合在一起。我还使用 Bootstrap 和各种行、列和 div 来构建和定位内容 - 但是我无法将我的图像组合在一起。我已经能够将它们对齐到它们仍然不匹配的程度等。请参阅附图了解我想要实现的目标。

有什么想法吗？

【问题讨论】：

你总是可以使用masonry.. 它真的很好用。你也可以使用纯 JS，不需要 jQuery。

标签： css twitter-bootstrap html

【解决方案1】：

您可以根据需要在马赛克样式中设置元素的样式以匹配它们。我不需要 JS。使用JS可能会更容易。

这是一个如何做到这一点的示例。

/* ========================================================================*/
/* ! 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 -->

我希望这对您有所帮助。请分享您的 cmets 以了解是否有更好的方法来执行此操作，如果您发现这有用，请告诉我。

和平！

【讨论】：

【解决方案2】：

使用 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

目前，您可以使用 css 来执行此操作，使用 css3 列。看看这里的例子（虽然这不能完全解决你的布局）：

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%;

【讨论】：