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


Tags: html,css,jquery-masonry

Problem :

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: current

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

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

enter image description here

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/



Solution :

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

    CSS Howto..

    How do I execute a javascript after Ajax load?

    How to remove reference of specific CSS files files from View

    How do I keep this sidebar stationary yet still responsive?

    How to Position an Image underneath a form in CSS

    How to prevent menu from closing when losing mouse focus?

    How to create uparrow downarrow using simple css

    How to make div scalable by using percentage in CSS

    How can I change the colour of individual squares on this grid…?

    How to add a shadow for underline (bottom border) in css

    How to switch position of 2 divs using only CSS?

    How create an overlay button on different containing div

    How to add css in django Updateview or Create view form

    how to target IE 6 AND IE7 in css

    How to display “Classic” fractions in CSS / Javascript

    How can I add a hover event to multiple paths in a SVG? And have it work in IE9?

    how is Zurb's Foundation Menu button coded?

    How to indent text exactly one character width

    How does one know exact pixel size / relationships between CSS elements?

    How to integrate many CSS files

    How to serve css files in djangos's flatpages?

    How to hide div for specific height or width using CSS [duplicate]

    How to make layout with 3 elements where 1 is resizable

    How to make a dropdown float with CSS

    How to Detect css by iPhone/iPad

    Using vi, how can I remove all lines that contain [searchterm]?

    I want to bring css for select option. how to write for this image, sample output like this

    In the ordered sequence of words: “Word1, Word2, Word3”: how to have 1 and only 1 hyperlink on “Word1” & “Word3”? Thus, skip a word in a single link?

    How to put a button inside of a text entry field in a form on a website using javascript, css, html

    How to set div's height in css and html

    how to prevent css and js being cached by internet service provider?