Схема изображения в архиве tumblr

Question

Я хочу воспроизвести способ отображения изображений в архиве tumblr (example).

Более явным образом у меня есть, например, 10 изображений, и я хочу отобразить их все в виде изображений миниатюр в прямоугольнике; изображения должны чередоваться друг с другом.
Мне интересно, какой алгоритм используется для расчета размера и положения каждого миниатюры.

Кто-нибудь знает, как это сделать?

Answer 1

У меня есть сайт HERE, так что подумайте, что эта галерея - это то, на что вы надеетесь. Первое, что вам нужно сделать, это сделать изображения правильного размера. Для этого я использую фотошоп, но любой редактор изображений будет делать. Создайте документ, в который будут вставляться все изображения. Положите изображения так, как вы хотите, и измените их соответствующим образом. Используйте инструмент линейки PhotoShops, чтобы убедиться, что промежуток между каждым изображением одинаковый.

Как только это будет выполнено, сохраните каждое изображение в таком размере. Они теперь пропорциональны друг другу. CSS прост, я обычно делаю это как проценты, но пиксели отлично работают. если у вас есть 10 изображений, тогда вам может понадобиться 1% -ный запас между каждым изображением, который составляет 9%, что оставляет 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>