CODEWITHSUNDEEP
javascripthtmlcss
vtproduction
vtproduction

Reputation: 147

Create grid of image

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 !

Upvotes: -1

Views: 2198

Answers (4)

Lucas S.
Lucas S.

Reputation: 702

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.

Upvotes: 1

Abhas Tandon
Abhas Tandon

Reputation: 1889

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

Upvotes: 1

UzumakiDev
UzumakiDev

Reputation: 1276

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

Upvotes: 1

Ed T.
Ed T.

Reputation: 1039

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

Upvotes: 2

Related Questions