Réduire dynamiquement la taille des vignettes pour occuper uniformément l'espace

J'essaie d'abaisser la taille des vignettes pour qu'elles s'adaptent uniformément sur la page, tout en restant aussi grandes que possible sans dépasser une largeur donnée.Réduire dynamiquement la taille des vignettes pour occuper uniformément l'espace

Ce code suivant est le plus proche que j'ai pu obtenir, son problème est qu'à certaines largeurs, il n'occupe pas complètement toute la largeur. Je vais supposer que cela est dû à ma compréhension insuffisante des mathématiques, quelqu'un peut-il m'aider? (Aussi, je ne suis pas particulièrement familier avec 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>

Source

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); 
}

Work combien de vignettes vous pouvez adapter sur une ligne en divisant la largeur du conteneur par la largeur des vignettes et arrondir (parce que nous ajoutons de plus une vignette supplémentaire afin de redimensionner les autres vers le bas). Recalculez la taille des vignettes en fonction du nombre par ligne.

Source

2012-01-07 09:13:10 andrewmabbott

Réduire dynamiquement la taille des vignettes pour occuper uniformément l'espace

Répondre

Questions connexes