1. 首頁
  2. 問答
  3. 我該怎麼做人工樣式或類似這個圖像區域

我該怎麼做人工樣式或類似這個圖像區域

2017-04-07 44 views
0

我正在使用Bootstrap4。如果我對img-fluid標籤的mansory風格畫廊做出響應。例如，第二張圖像很長（與高度一樣），並且與其他圖像之間有很大的空間。我怎樣才能做這個像這樣的畫廊，例如tumblr或pexels.com？我該怎麼做人工樣式或類似這個圖像區域

<div class="row"> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"> 
      </div> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"> 
      </div> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"> 
      </div> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"> 
      </div> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"> 
      </div> 
      <div class="col-md-4"> 
        <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg"> 
      </div> 
     </div>

我不喜歡的答案，但我需要在這個慵懶的負荷。我已經嘗試了很多，但我可以一起做這個，請幫助！

@media only screen and (min-width: 1100px) { 
 
    .masonry { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count: 4; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 900px) { 
 
    .masonry { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 700px) { 
 
    .masonry { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    } 
 
} 
 

 
.masonry { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
    -moz-column-gap: 1.5em; 
 
    -webkit-column-gap: 1.5em; 
 
    column-gap: 1.5em; 
 
    font-size: .85em; 
 
} 
 

 
.item { 
 
    background-color: #eee; 
 
    display: inline-block; 
 
    margin: 0 0 1em; 
 
    width: 100%; 
 
} 
 

 
.item img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
}
<div class="masonry"> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg"> 
 
    </div> 
 
</div>

來源

2017-04-07 marlonjd

回答

1
響應砌築

純CSS版本，沒有任何插件或腳本使用。

@media only screen and (min-width: 1100px) { 
 
    .masonry { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count: 4; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 900px) { 
 
    .masonry { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    } 
 
} 
 

 
@media only screen and (min-width: 700px) { 
 
    .masonry { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    } 
 
} 
 

 
.masonry { 
 
    margin: 1.5em 0; 
 
    padding: 0; 
 
    -moz-column-gap: 1.5em; 
 
    -webkit-column-gap: 1.5em; 
 
    column-gap: 1.5em; 
 
    font-size: .85em; 
 
} 
 

 
.item { 
 
    background-color: #eee; 
 
    display: inline-block; 
 
    margin: 0 0 1em; 
 
    width: 100%; 
 
} 
 

 
.item img { 
 
    max-width: 100%; 
 
    height: auto; 
 
    display: block; 
 
}
<div class="masonry"> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"> 
 
    </div> 
 
    <div class="item"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg"> 
 
    </div> 
 
</div>

來源

2017-04-07 20:14:10

+0

你是最棒的工作謝謝你！ – marlonjd

+0

樂意提供幫助。 –

+0

如何將此代碼添加到lazyload org imgix.js？如果我啓用延遲加載一切......你知道：D – marlonjd

1

只需添加砌築到頁面，其配置爲與itemSelector: '.col-md-4'

$('.row').masonry(function() { 
 
    itemSelector: '.col-md-4' 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"> 
 
<div class="row"> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg"> 
 
    </div> 
 
</div>

如果你想在擺脫了水平填補細胞，造成圖像之間的溝槽，你co ULD始終只是沒有使用引導.col類那裏，也可以添加.nowrap父.row並刪除與CSS填充像.nopad > div { padding: 0; }

$('.row').masonry(function() { 
 
    itemSelector: '.col-md-4' 
 
});
.nopad > div { 
 
    padding: 0; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script> 
 
<div class="row nopad"> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/buffalo-nature-animals-animal-green.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://pixellous.imgix.net/animals/africa-african-animal-cat-41315.jpeg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/landscape-dark-view-nature.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/lifts-technology-lift-black-and-white.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/man-black-and-white-excited.jpg"> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <img class="img-fluid" src="https://d1p5m9g4zcqpp8.cloudfront.net/Photos/popular/spices-salt-pepper-spoon.jpg"> 
 
    </div> 
 
</div>

來源

2017-04-07 20:09:11

+0

感謝您幫助的人，我怎麼可以添加此代碼lazyload組織imgix.js？如果我啓用懶惰加載所有內容......你知道：D – marlonjd

相關問題

 相關問題