Q:

how to dynamically move list items inside a DIV to get proper arrangement?

I have a some images displayed using list items inside a div. With simple CSS float:left tricks, I am able to get the following layout:

But I was them to dynamically arrange based on div width and height and want something like this:

Let me know if there is any way to achieve the same using CSS, JavaScript or jQuery.
Also, let me know if these sample screenshots does not help and HTML code is needed.
Thanks
EDIT: Adding image after applying masonry plugin (see image 3 below). Now I have equal number of images and they are equally spaced and with proper gutter. But it is always aligned to left. How can this always be centered aligned?
I have the following code:
<div id="container">
    <img src="" class="myimage">
    <img src="" class="myimage">
    <img src="" class="myimage">
    <img src="" class="myimage">
</div>

And jQuery for masonry part:
$('#container').masonry({
    "gutter": 10,
    itemSelector: '.myimage'
}); 

EDIT 2: Also made a jsfiddle to show the problem with right margin after applying masonry plugin. Please resize browser also to see right gap in each case: http://jsfiddle.net/5KyRd/7/

A:

Here is a media query solution: http://jsfiddle.net/B45qv/
First you'll set your images to be max-width: 100% so they'll be flexible.  
From there you will need to decide how many images you want per row and set their width as a percentage.  That's as simple as dividing 100 by the number per row ( 100 / 7 = 14.285714% ).  This width should include all padding and margins as they will add to the image's dimensions.
For a 1% margin on all sides the width for the image above would be 12.285714%, 1 + 12.285714% + 1 = 14.285714%.
Other than that you just need to decide at what screen dimensions you will adjust the number per row.  My example had arbitrary values.
HTML

<body>
    <div class="clearfix">
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
        <img src="http://lorempixel.com/125/50/" alt="temp" />
    </div>
</body>

CSS

body {
    margin: 0;
    background-color: red;
}
div {
    width: 86%;
    margin: 25px auto;
    padding: 15px 25px;
    background-color: white;
    border: 1px solid white;
    border-radius: 8px;
}
.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
div img {
    float: left;
    max-width: 100%;
    width: 12.285714%;  /* 7 per row */
    margin: 1%;
}
@media screen and (max-width: 799px) {
    /* 6 per row */
    div img {
        width: 14.66666%;
    }
}
@media screen and (max-width: 699px) {
    /* 5 per row */
    div img {
        width: 18%;
    }
}
@media screen and (max-width: 599px) {
    /* 4 per row */
    div img {
        width: 23%;
    }
}
@media screen and (max-width: 499px) {
    /* 3 per row */
    div img {
        width: 31.33333%;
    }
}
@media screen and (max-width: 399px) {
    /* 2 per row */
    div img {
        width: 48%;
    }
}

