Jquery 随机宽度和宽度的砌体网格中的图像廊道；随机高度

这是我的画廊布局。我想安排在上述网格风格和响应图像。它具有随机宽度和随机高度。但我所有的图像都是垂直的。所以我需要帮助来解决这个问题

提前谢谢

我尝试使用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中尝试列计数。但我需要它 动态地通过jquery

---

如何以这种样式排列图像？我所有的图片都在 同样大小。但需要出现随机宽度或随机高度

---

尝试在选择器

上调用
.each（）
“#myContent li img”

以迭代

img

元素；利用

Math.min

，

Math.random

$（“#myContent li img”）。每个（函数（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））
});
#容器{
宽度：300px；
利润率：0；
}
#霉菌含量{
-moz列数：2；
-moz柱间距：15px；
-webkit列数：2；
-webkit柱间隙：15px；
列数：2；
柱间距：15px；
宽度：800px；
}
#肌钙蛋白{
显示：内联块；
边缘底部：0px；
宽度：自动；
}
#第n个孩子（n+1）：第n个孩子（-n+4）{
文本对齐：右对齐；
}
#第n个孩子（n+5）：第n个孩子（-n+6）{
文本对齐：左对齐；
}











Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书






lol.谢谢。那些是我的收藏。摄影师的功劳。隐藏的信息是：“图像很好，但你的代码在哪里？”哈哈：D。“所以我需要帮助来完成这项工作。”我并没有开始编写它。在这种情况下，我担心我们无法为您做任何事情。我们的角色不是为你开发东西。你必须先试试，如果你真的做不到，就来这里发布你的代码，这样我们可以帮助调试它。在发布这个问题之前，我浏览了masonary网格和其他一些pinterest样式的网格，但它们都有固定的宽度，这不是我的要求。所以我不确定这些网格应该被修改，或者我可以找到一个更好的插件。这就是为什么我在编码它之前在这里发布的原因谢谢你。这并不完全是我想要的，但它很有帮助。有可能创建一个标准布局的jquery，它应该重复相同的模式吗？@srikanth_naalla不确定解释“有可能创建一个标准布局的jquery，它应该重复相同的模式吗？”？可以描述“标准布局的jquery”，“应重复相同的模式”？请检查此图像。。当我上传超过12张图片时，它们是我图片的标准布局。布局应重复，如紫色所示@srikanth_naalla“请检查此图像。当我上传超过12幅图像时，灰色框是我图像的标准布局。布局应重复，如紫色所示。”灰色、紫色框的排列方式相同-只有颜色不同？是的，它们是相同的。为了便于理解，我只涂了一种紫色。请把它想象成一个画廊。前11幅图像（灰色方框）以这种方式排列。如果我有超过11个图像，布局应该重复（如12-22）
#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;}