砌体网格中的图像库，随机宽度和宽度随机高度

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

设置每个img元素的伪随机Math.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/