Responsive Image Grid fix

Question

我正在使用此圖像網格：https://codepen.io/team/css-tricks/pen/pvamyK，但我需要在HTML上加載圖像，而不是在js上加載圖像。

像這樣：

<section id="photos"> 
<img src="img/single.png" alt="Cute cat"> 
<img src="img/single2.png" alt="Serious cat"> 
<img src="img/single3.png" alt="Serious cat"> 
<img src="img/single4.png" alt="Serious cat"> 
<img src="img/single5.png" alt="Serious cat"> 
</section> 

Answer 1

只需卸下js代碼和HTML添加圖像。 js代碼只是隨機創建圖像標記。

#photos { 
 
    /* Prevent vertical gaps */ 
 
    line-height: 0; 
 
    -webkit-column-count: 5; 
 
    -webkit-column-gap: 0px; 
 
    -moz-column-count: 5; 
 
    -moz-column-gap: 0px; 
 
    column-count: 5; 
 
    column-gap: 0px; 
 
} 
 

 
#photos img { 
 
    /* Just in case there are inline attributes */ 
 
    width: 100% !important; 
 
    height: auto !important; 
 
} 
 

 
@media (max-width: 1200px) { 
 
    #photos { 
 
    -moz-column-count: 4; 
 
    -webkit-column-count: 4; 
 
    column-count: 4; 
 
    } 
 
} 
 

 
@media (max-width: 1000px) { 
 
    #photos { 
 
    -moz-column-count: 3; 
 
    -webkit-column-count: 3; 
 
    column-count: 3; 
 
    } 
 
} 
 

 
@media (max-width: 800px) { 
 
    #photos { 
 
    -moz-column-count: 2; 
 
    -webkit-column-count: 2; 
 
    column-count: 2; 
 
    } 
 
} 
 

 
@media (max-width: 400px) { 
 
    #photos { 
 
    -moz-column-count: 1; 
 
    -webkit-column-count: 1; 
 
    column-count: 1; 
 
    } 
 
} 
 

 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<section id="photos"> 
 
    <img src="https://placekitten.com/344/328" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/333/368" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/214/375" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/286/268" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/288/388" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/235/246" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/213/389" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/276/304" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/216/354" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/252/371" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/328/350" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/381/339" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/292/259" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/216/285" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/337/371" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/335/382" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/245/345" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/307/306" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/258/363" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/293/390" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/355/221" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/330/205" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/234/383" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/329/200" alt="pretty kitty"> 
 
    <img src="https://placekitten.com/303/362" alt="pretty kitty"> 
 

 
</section>