JSFiddle - React, Tailwind, and code Playground

by Baylock

HTML

<div class="container">     
    <a href="" class="pic_block"><img src="images/x.jpg"/></a>
	<a href="" class="pic_block"><img src="images/x.jpg"/></a>	      
	<a href="" class="pic_block"><img src="images/x.jpg"/></a>
	<a href="" class="pic_block"><img src="images/x.jpg"/></a>
	<a href="" class="pic_block"><img src="images/x.jpg"/></a>	      
	<a href="" class="pic_block"><img src="images/x.jpg"/></a>
	<a href="" class="pic_block"><img src="images/x.jpg"/></a>
	<a href="" class="pic_block"><img src="images/x.jpg"/></a>	      
	<a href="" class="pic_block"><img src="images/x.jpg"/></a>
</div>

CSS

.container{
	background:red;
    width:90%;
    margin:0px auto 0px auto;
    font-size: 0px;
}
        	
.pic_block
{
    display:inline-block;
    width:134px;
    height:170px;
	margin-bottom:12px;	
    background:blue;
}
        	
img{
    width:134px;
    height:170px;	        	
}

JavaScript

onResize = function() {
     var containerWidth       = $('.container').width();
     var thumbWidth           = $('.pic_block').width();
     var thumbsPerLine        = Math.floor(containerWidth/thumbWidth);
     var marginTotalWidth     = (containerWidth-(thumbsPerLine*thumbWidth));
     var tempMarginR          = Math.floor(marginTotalWidth/(thumbsPerLine-1));
     var extraTotalSpaceWidth = ((marginTotalWidth/(thumbsPerLine-1)) - tempMarginR) *thumbsPerLine;
     var i                    = Math.floor(extraTotalSpaceWidth); 
     var n                    = 1;        	 

     $('.pic_block').css('margin-right',tempMarginR);

	 while( n <= thumbsPerLine) 
	 {  	
 	     if(n == thumbsPerLine)
 	     {
	 	     $('.pic_block:nth-child('+n+'n)').css('margin-right',0); 
 	     }
 	     else
 	     {
 	       	 if(i>0)
 	       	 {
	 	       	 $('.pic_block:nth-child('+thumbsPerLine+'n+1)').css('margin-right','+=1');  
	 	       	 i--;
	 	     };
 	     };
  		 n++; 
	 }   	 
};

$(document).ready(function(){onResize();});
$(window).bind('resize', onResize);