響應式圖像網格。填寫包裝上的空白

當電網調整大小（在瀏覽器調整大小），或者當在網格圖像的一定數量的，它留下空的間隙。我想知道是否有什麼我可以做的，也許使用jQuery，用我選擇的圖像填補空白。看到下面的圖片，我的意思是，它顯示了一個通過它的對角線的持有人圖像。這完全是出於美學原因。

http://cl.ly/Dql6

下面是從的jsfiddle代碼;

<!doctype html> 
<head> 

<style type="text/css"> 
ul { margin: 0; padding: 0; } 
figure { margin: 0; padding: 0; } 
#page { 
    margin: 0 auto; 
    max-width: 1000px; 
} 
.item { 
    display:block; 
    position:relative; 
    float:left; 
    overflow:hidden; 
    width: 20%; 
} 
img { 
    max-width:100% !important; 
    height:auto  !important; 
    width: auto; 
    border: 0; 
    -ms-interpolation-mode: bicubic; 
    vertical-align: middle; 
} 
.name a { 
    display:inline; 
    text-decoration: underline; 
    position:relative; 
} 
@media (max-width: 800px) { .item { width: 25%; } } 
@media (max-width: 600px) { .item { width: 33.33%; } } 
@media (max-width: 400px) { .item { width: 50%; } } 
</style> 

</head> 

<body> 
<div id="page"> 
    <div id="gallery"> 
     <a href="http://google.com/"> 
      <figure class="item"> 
       <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200"> 
      </figure> 
     </a> 
     <a href="http://google.com/"> 
      <figure class="item"> 
       <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200"> 
      </figure> 
     </a> 
     <a href="http://google.com/"> 
      <figure class="item"> 
       <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200"> 
      </figure> 
     </a> 
     <a href="http://google.com/"> 
      <figure class="item"> 
       <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200"> 
      </figure> 
     </a> 
     <a href="http://google.com/"> 
      <figure class="item"> 
       <img src="http://f.cl.ly/items/1N030m2a1g2U260e0A1e/sony_ps3-21-200x200.jpg" width="200" height="200"> 
      </figure> 
     </a> 
    </div> 
</div> 
</body> 
</html>

來源

2012-02-01 robflate

根據我的理解，您希望獲得圖庫中空白區域的數量，以便您可以在該空白處放置其他東西。

這是一個非常粗略的例子，但我想確保這是您想要實現的目標，從這一點來看，如果您有任何問題，我們可以隨時改進它。

它的工作方式是每次點擊它時都會顯示圖庫中剩餘空白空白的數量。

請看看例子：http://jsfiddle.net/jYGPV/1/

來源

2012-08-23 17:05:36 xapu

響應式圖像網格。填寫包裝上的空白

回答

相關問題