6

Есть галерея

Вот код

<style>
.galleryPage {width:90%;max-width:800px;min-width:800px;width:800px;margin:0 auto;padding-top:2em;}
.sortBy{float:left;}
.linkSortAct {border-bottom:1px dashed #003080;color:#003080;}
.linkSort:hover {color:#003080;opacity:0.8;}
.galleryLoad {width:80%;float:left;padding-left:2em;}


.aGalleryImg{width:33%;float:left;height:18em;background-size:contain;background-repeat:no-repeat;margin:0;padding:0;}
.aGalleryImg:hover {opacity:0.6;cursor:pointer;}

.aGalleryAddBtn {margin-top:1em;cursor:pointer;width:100%;text-align:center;font-size:1.2em;background:#d9d9d9;height:2em;padding-top:10px;}
.aGalleryAddBtn:hover{opacity:0.7;}
</style>    
<div class="galleryLoad" id="galleryLoad">  
    <div class="aGalleryImg" id="img2" style=" background-image: url(gallery/original/IMG_1.JPG);"></div>
    <div class="aGalleryImg" id="img3" style=" background-image: url(gallery/original/IMG_10.JPG);"></div>
    <div class="aGalleryImg" id="img4" style=" background-image: url(gallery/original/IMG_11.JPG);"></div>
    <div class="aGalleryImg" id="img5" style=" background-image: url(gallery/original/IMG_12.JPG);"></div>
    <div class="aGalleryImg" id="img6" style=" background-image: url(gallery/original/IMG_13.JPG);"></div>

    <div class="clear"></div>
    </div>

Каким образом можно сделать обтекание без пропусков , что бы получилось как на картинке , желательно без привлечения javascript , только средствами css

2 ответа 2

7

С помощью колонок:

Поддержка браузерами 97.6%

.galery{
   -webkit-column-count:2;  
    -moz-column-count:2;  
    column-count:3;

    /*Отступ между колонками*/
    -webkit-column-gap: 0px;  
    -moz-column-gap: 0px;  
    column-gap: 0px;

    /*Отступ между картинками*/
    line-height:0;
}

.galery img{
     width:100%;
}
<div class="galery">
   <img src="https://placeimg.com/640/480/any" >
   <img src="https://placeimg.com/640/280/any" > 
   <img src="https://placeimg.com/640/180/any" >
   <img src="https://placeimg.com/640/380/any" >   
   <img src="https://placeimg.com/640/230/any" >   
</div>

5

Например с помощью masonry grid:

$('.galleryLoad').masonry({
  itemSelector: '.aGalleryImg',
  percentPosition: true
});
img {
  max-width: 100%;
  width: 100%;
}

.aGalleryImg {
  width: 33%;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
  
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<!-- or -->
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.js"></script>
  
  <div class="galleryLoad" id="galleryLoad">
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/500/500/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/500/400/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/400/300/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/300/300/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/200/300/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/100/400/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/400/200/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div>
  </div>

Такой еще вариант с flex:

img {
  max-width: 100%;
  width: 100%;
}

.aGalleryImg {
  width: 33%;
}

.galleryLoad {
  display: flex;
  flex-flow: column wrap;
  max-height: 650px;
  height: 100%;
}
  <div class="galleryLoad" id="galleryLoad">
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/500/500/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/500/400/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/400/300/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/300/300/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/200/300/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/400/200/any" alt=""></div>
    <div class='aGalleryImg'><img src="https://placeimg.com/500/300/any" alt=""></div>
  </div>

2
  • желательно без привлечения javascript 28 мар 2017 в 14:26
  • @SashaOmelchenko, "желательно" ж не "только"
    – SVE
    28 мар 2017 в 14:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.