顯示不同高度的網格視圖 - HTML

Question

我想在HTML文檔中將圖像顯示爲網格視圖。這裏是示例圖像，尋找什麼。

我要爲我L1標籤不同的高度。現在我的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或只是搜索「jquery插件網格」。