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 to remove background color from reply of html email template in Outlook 2010/2013

    How to declare css “global” height? Inside the html file or inside the css file?

    fa-star () is always yellow, how to make it white?

    How to remove space above and below the in-line block elements?

    How to make diagonal titles on html tables

    How to selectively pass mouse events to underlying svg elements

    How do I implement a MailChimp API form embed?

    CSS - how do I float another div over another without overlapping

    How to give a javascript function and css style in struts2 property tag

    How can I do to merge font attributes in css

    How to change order of elements inside tables?

    How to show Only 4 slides in a row using Bxslider

    How to center a text line in a navigation bar?

    How to hightlight non editable backgrid cells?

    How to add css class to style.css?

    creating a slide show for home page in my web site [closed]

    How to force floating blocks staying in the same row in css?

    How come half the triangle is missing

    How can I vertically align the text in an anchor tag?

    How to set align of elements to center with css?

    Something in my CSS is causing a random white bar to appear, how do I fix it?

    how to add line break in HTML using jQuery

    How to create Two Columns with Separate Scrollbars in Responsive Bootstrap?

    How to change an image on click using CSS alone?

    “Best fit” font size - how do I measure a sentence width?

    How to distribute floated elements evenly with a dynamic column and row count in CSS?

    How to read CSS specification?

    How to style a completely different element when hovering over another element(with different parents)? [duplicate]

    How to align my dropdown menu to center of the page?

    Html and CSS for emails, how to, where to?