图片廊随机宽度和高度随机

Question

这是我的画廊布局。我想按上述网格样式排列图像并作出响应。它具有随机宽度&随机高度。但是我拥有的所有图像都是垂直的。所以我需要帮助来解决这个问题。

在此先感谢。

我试过使用CSS column-count。这是我得到

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 。

---

我如何可以安排在这个风格的图像？我所有的图像都在 相同的大小。但需要出现随机宽度或随机高度。

---

尝试在选择"#myContent li img"主叫.each()迭代img元件;组伪随机height，利用Math.min每个img元素的width，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/