显示不同高度的网格视图 - HTML

Question

我想在HTML文档中将图像显示为网格视图。这是示例图像，正在寻找。

我希望我的li标签有不同的高度。现在我的HTML对所有li标签都采用相同的高度。

这是我的HTML

<div class="blog_main_midd_section"><ul>
                 <li>
                     <div class="blog_images">
                         <img src="images/blog_img01.png" alt="">

                        </div>
                    </li>
                 <li>
                     <div class="blog_images">
                         <img src="images/blog_img02.png" alt="">

                        </div>
                    </li>

                 <li>
                     <div class="blog_images">
                         <img src="images/blog_img03.png" alt="">
                        </div>
                    </li>

                 <li>
                     <div class="blog_images">
                         <img src="images/blog_img04.png" alt="">

                        </div>
                    </li>

                 <li>
                     <div class="blog_images">
                         <img src="images/blog_img05.png" alt="">

                        </div>
                    </li>
</ul>
</div>

CSS

.blog_main_midd_section {
 display:block;
}
.blog_main_midd_section ul {
 display:block;
 margin:0 0 75px 0;
}

.blog_main_midd_section ul li {
 display:inline-block;
 border:1px solid #50565a;
 width:31%;
 padding:0 0 20px 0;
 height:auto;
 margin:15px 1%;
 vertical-align:top;
}

任何人都可以建议我怎么做。

提前致谢

Answer 1

要将网页上的元素显示为网格视图，您可以使用现有的jquery插件之一作为魅力并具有漂亮的动画。您可以找到一个符合您需要的in this post或只搜索＆＃34; jquery插件网格＆＃34;。