Create grid of image

Question

Here I have to implement a webpage

enter image description here

which has a grid that display images. It will be easy if all the images have the ideal width and height, so I can arrange these images to fit the grid. However, with images of various sizes, I hasn't found solution yet. So, anyone has any idea or know some library/tool that can flexibly create the image grid like that ? Thankyou !

possible duplicate of [Mosaic Grid gallery with dynamic sized images](http://stackoverflow.com/questions/10930783/mosaic-grid-gallery-with-dynamic-sized-images) — web-tiki, Apr 19 '14 at 11:01

score 2 · Accepted Answer · answered Apr 19 '14 at 10:49

2

I reckon this is what you are looking for: http://masonry.desandro.com/ . JS library that allows to do exactly what you want.

answered Apr 19 '14 at 10:49

Ed T.

1,039
2
11
17

score 1 · Answer 2 · answered Apr 19 '14 at 10:50

If you're using jQuery I would recommend using Masonry, it's also built into core wordpress if you're using that too.

Here's an example of using it.

function masonry_shiz(){
        $('#gal1').masonry({
            singleMode: true,
            "gutter": 0,
            isFitWidth: true,
            isAnimated: true
        }).imagesLoaded(function() {
            $('#gal1').masonry('reloadItems');
        });
        $(window).load(function() {
            $(".masonry-brick").each(function(i) {
                $(this).delay((i + 1) * 50).fadeIn();
            });
        });
    }masonry_shiz

Here's a link to the plugin

score 1 · Answer 3 · answered Apr 19 '14 at 10:52

1

Try using jQuery plugin called Freewall. It is available at http://vnjs.net/www/project/freewall/

Check this demo for the same plugin (same as your requirement):

http://vnjs.net/www/project/freewall/example/image-layout.html

answered Apr 19 '14 at 10:52

Abhas Tandon

1,859
16
26

score 1 · Answer 4 · answered Apr 19 '14 at 10:54

1

If your design is not supposed to change, you can use a CSS framework to build such a page.

A famous one is Bootstrap, which allows you to order <div> tags in a grid, using rows and columns. This is responsive as well, meaning the result is auto-adapted to large screens as well as phones and tablets.

You can use other frameworks such as elasticss, Knacss, Blueprint.

answered Apr 19 '14 at 10:54

Lucas S.

702
2
11
22

1

Do not hesitate to ask for some examples if you get stuck, but in your case, we can imagine the following: One row for the links (one div with places, one div with roundtrips, one div with pictures). One row with the statue and the two other pictures (the statue in a div, the two pictures in an other div, with a row for the 1st picture and a row for the second) etc. – Lucas S. Apr 19 '14 at 12:05

Create grid of image

4 Answers4