tumblr檔案中的圖像佈局

Question

我想重現圖像在tumblr檔案（example）中的顯示方式。

更明確地說，例如，我有10個圖像，並且我想將它們全部顯示爲矩形中的縮略圖圖像;圖像必須相互交錯。
我想知道哪個算法是用來計算大小和每個縮略圖的位置。

有誰知道該怎麼做？

Answer 1

我有一個網站HERE所以認爲這個畫廊是你希望的東西。你需要做的第一件事是使圖像的大小正確。爲此我使用photohshop，但任何圖像編輯器都可以。創建一個所有圖像都適合的文檔。將圖像放在你想要的圖像上並相應地調整它們的大小。使用PhotoShops標尺工具來確保每個圖像之間的差距是相同的。

完成此操作後，將每張圖像保存爲該尺寸。他們現在正在相互成比例。 CSS很簡單我通常以百分比的形式來做，但像素也可以很好地工作。如果您有10張圖片，那麼您可能需要在每張圖片的9％之間留出1％的餘量，剩下的91％留在每張圖片之間進行分割，將寬度設置爲9.1％，這是您的第一行。對於這裏一個更好的例子是我用上面鏈接網站的CSS和HTML和：

HTML and CSS

<section id="gallery"> 
     <div id="line_1"> 
      <div id="image_1"> 
       <a href="images/gallery_1.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_1.jpg" alt="Beach and yacht in the sun" /></a> 
      </div> 
      <div id="image_2"> 
       <a href="images/gallery_5.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_2.jpg" alt="Cove - looking out to see" /></a> 
      </div> 
     </div> 
     <div style="clear:both;"> 
     </div> 
     <div id="line_2"> 
      <div id="image_3"> 
       <a href="images/gallery_4.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_3.jpg" alt="Blue skies, looking through stair hole" /></a> 
      </div> 
      <div id="line_2_2"> 
       <div id="image_4"> 
        <a href="images/gallery_2.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_4.jpg" alt="beach and yacht at night" /></a> 
       </div> 
       <div style="clear:both;"> 
       </div> 
       <div id="line_2_3"> 
        <div id="image_5"> 
         <a href="images/gallery_6.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_5.jpg" alt="hills in the summer" /></a> 
        </div> 
        <div id="image_6"> 
         <a href="images/gallery_3.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_6.jpg" alt="Blue skies, looking through stair hole different angle 2" /></a> 
        </div> 
        <div style="clear:both;"> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div style="clear:both;"> 
     </div> 
     <div id="line_3"> 
      <div id="image_7"> 
       <a href="images/attractions_3.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_7.jpg" alt="Blue skies, looking through stair hole different angle 3" /></a> 
      </div> 
      <div id="image_8"> 
       <a href="images/about_3.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_8.jpg" alt="hills in the summer with person looking over village" /></a> 
      </div> 
     </div> 
     <div style="clear:both;"> 
     </div> 
     <div id="line_4"> 
      <div id="image_9"> 
       <a href="images/about_1.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_9.jpg" alt="little town in summer" /></a> 
      </div> 
      <div id="image_10"> 
       <a href="images/attractions_2.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_10.jpg" alt="Looking at the castle from a distance" /></a> 
      </div> 
      <div id="image_11"> 
       <a href="images/about_2.jpg" class="lightbox"><img style="width: 100%;" src="images/thumbnail_11.jpg" alt="very old photo of church with red door" /></a> 
      </div> 
     </div> 
     <div style="clear:both;"> 
     </div> 
    </section>