You can use CSS3 @media Query:
http://www.w3schools.com/cssref/css3_pr_mediaquery.aspadd:
@media all and (min-width: 1025px) {
#thumbWrapp .thumbnails {
width: 310px;
}
after:
#thumbWrapp .thumbnails {
width: 33%;
float: left;
margin: 0.1%;
}
change the values for width and margin with the numbers that fit for you.
That will make div .thumbnails (the div that contains the image) 32% width for screens that are less then 1025px and 310px for screens that are more then 1024px.
Width in % is important for small screens (for the image to be responsive, become smaller then 310px to fit their screen), for big screens a width in pixels will be fine. The div will have the width of the image and masonry will place as much thumbnails as she can. Ex: 1920px screen. Masonry will place 6 thumbnails. 1280px screen. Masonry will place 4 thumbnails. See attachments.
I belive 310px for thumbnails is ok. To need to make them bigger. Not good for a shared host.
You should know that the width of the div .thumbnails is important. If you make the thumbnails 500px (just for example), but you do not change the width of the div, the image will display to fit the div. Will look small even if she is 500px. 32% width of the div means 32% of the screen resolution.