如何以马赛克风格对齐图像？ HTML / CSS

时间：2014-03-11 19:37:54

标签： css twitter-bootstrap html

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

有什么想法吗？

enter image description here

2 个答案:

答案 0 :(得分：8)

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

答案 1 :(得分：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 -->

希望您对此有帮助。请分享您的评论，以了解是否有更好的方法来进行此操作，如果您觉得此方法有用，也请告诉我。

和平！

相关问题
最新问题