Галерея изображений в Кладка сетке со случайным ширины и высоты случайного

Question

Это моя галерея макет. Я хотел упорядочить изображения в стиле сетки и реагировать. Он имеет произвольную ширину & случайную высоту. Но все изображения у меня вертикальные. Поэтому мне нужна помощь в этом.

Заранее спасибо.

Я пробовал использовать счетчик столбцов CSS. Это то, что я получил

HTML код:

<div id="container"> 
    <ul id="myContent">    
     <li><img src="images/1.jpg" alt=""></li> 
     <li><img src="images/2.jpg" alt=""></li> 
     <li><img src="images/3.jpg" alt=""></li> 
     <li><img src="images/4.jpg" alt=""></li> 
     <li><img src="images/5.jpg" alt=""></li> 
     <li><img src="images/6.jpg" alt=""></li> 


    </ul> 
</div> 

CSS:

#container { 
    width: 1000px; 
    margin: 0 auto; 
} 

#myContent { 
    -moz-column-count: 2; 
    -moz-column-gap: 10px; 
    -webkit-column-count: 2; 
    -webkit-column-gap: 10px; 
    column-count: 2; 
    column-gap: 10px; 
    width: 800px; 
    list- 
} 

#myContent img{ 
    display: inline-block; 
    margin-bottom: 0px; 
    width:auto; 
} 
#myContent li:nth-child(n+1):nth-child(-n+4) {text-align:right;} 
#myContent li:nth-child(n+5):nth-child(-n+6){text-align:left;} 

Как я могу поместить/расположить изображения динамически? Есть ли другой путь?

Answer 1

смотрите, это была всего лишь попытка подсчета столбцов из css. Но мне это нужно динамически через jquery.

---

Как я могу организовать изображения в этом стиле? Все мои изображения находятся в одинакового размера. но должны появляться случайная ширина или произвольная высота.

---

Попробуйте позвонить .each() на селекторе "#myContent li img" итерировать img элементов; множество псевдослучайной height, width каждого элемента, использующего imgMath.min, Math.random

$("#myContent li img").each(function(i, el) { 
 
    this.height = Math.min(this.height 
 
         , 1 + Math.floor(Math.random() * this.height * 2)); 
 
    this.width = Math.min(this.width 
 
         , 1 + Math.floor(Math.random() * this.width * 2)) 
 
});

#container { 
 
    width: 300px; 
 
    margin: 0 0; 
 
} 
 
#myContent { 
 
    -moz-column-count: 2; 
 
    -moz-column-gap: 15px; 
 
    -webkit-column-count: 2; 
 
    -webkit-column-gap: 15px; 
 
    column-count: 2; 
 
    column-gap: 15px; 
 
    width: 800px; 
 
} 
 
#myContent img { 
 
    display: inline-block; 
 
    margin-bottom: 0px; 
 
    width: auto; 
 
} 
 
#myContent li:nth-child(n+1):nth-child(-n+4) { 
 
    text-align: right; 
 
} 
 
#myContent li:nth-child(n+5):nth-child(-n+6) { 
 
    text-align: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <ul id="myContent"> 
 
    <li> 
 
     <img src="http://www.cuded.com/wp-content/uploads/2013/02/Patric-Shaw_17600_664.jpg" alt=""> 
 
    </li> 
 
    <li> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/236x/fa/5a/8b/fa5a8b810e97a28b87d7771d09dc4ba5.jpg" alt=""> 
 
    </li> 
 
    <li> 
 
     <img src="http://www.paulbohman.com/assets/images/photo/vintage/2012/angela_margaux/_8002561.jpg" alt=""> 
 
    </li> 
 
    <li> 
 
     <img src="http://images4.fanpop.com/image/photos/16100000/Vintage-Fashion-vintage-16124910-450-586.jpg" alt=""> 
 
    </li> 
 
    <li> 
 
     <div> <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book </span> 
 
     </div> 
 
    </li> 
 
    <li> 
 
     <img src="http://www.theloveequalsblog.com/wp-content/uploads/2011/03/LUV5846-2.jpg" alt=""> 
 
    </li> 
 
    <li> 
 
     <img src="https://s-media-cache-ak0.pinimg.com/736x/94/66/a9/9466a9d9f2f437221462efa5cdf6a1c5.jpg" alt=""> 
 
    </li> 
 
    </ul> 
 
</div>

jsfiddle http://jsfiddle.net/bh2txhqw/4/