Динамически уменьшая размер миниатюр, чтобы равномерно занимать пространство

Я пытаюсь уменьшить размер миниатюр, чтобы они равномерно поместились на странице, но все равно должны быть как можно большими, не переходя по определенной ширине.Динамически уменьшая размер миниатюр, чтобы равномерно занимать пространство

Этот следующий код является самым близким, которого я смог достичь, проблема заключается в том, что при определенных ширинах он не полностью занимает всю ширину.

Я собираюсь предположить, что это связано с моим менее чем адекватным пониманием математики, может кто-то помочь? (Также я не особенно знаком с Javascript).

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
     <style> 
      .thumb { 
       display: inline-block; 
       background-color: green; 
       margin: 4px; 
       width: 200px; 
       height: 200px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="thumbnails"><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div><div class="thumb"></div></div> 

     <script> 
      var resizeThumbnails = function() { 
       var w = $('#thumbnails').width(); 
       var thumbsPerRow = w/208; 
       var thumbDiffer = 208 - (thumbsPerRow % 1) * 208; 
       var thumbSize = 208 - (thumbDiffer/Math.floor(thumbsPerRow)); 
       var thumbSize = thumbSize - 8; 
       $("#thumbnails .thumb").width(thumbSize).height(thumbSize); 
      } 
      $(window).resize(resizeThumbnails); 
      $(window).ready(resizeThumbnails); 
      resizeThumbnails(); 
     </script> 
    </body> 
</html>

источник

2012-01-07 Noah McIlraith

var resizeThumbnails = function() { 
    var w = $('#thumbnails').width(); 
    var thumbsPerRow = Math.ceil(w/208); 
    var thumbSize = Math.floor(w/thumbsPerRow) -8; 
    $("#thumbnails .thumb").width(thumbSize).height(thumbSize); 
}

работа, сколько миниатюр вы можете разместить на строке, разделив ширину контейнера по ширине миниатюр и округлить (потому что мы добавили дополнительные дополнительный эскиз для того, чтобы изменить размер остальных вниз). Пересчитать размер эскиза, основанный на числе строк.

источник

2012-01-07 09:13:10 andrewmabbott

Динамически уменьшая размер миниатюр, чтобы равномерно занимать пространство

ответ

Смежные вопросы