Jump to content

masonry layout

Nic727

By Nic727
in JavaScript

 Share

Recommended Posts

Nic727 Member

Nic727

Posted
Posted

Hi,

 

do you know a good way to do a kind of masonry layout with 2 columns and responsive image height?

 

I would like to do something like this :

1456320991-concept-galerie.jpg

So I guess that I can use float left for the first row and float right for the second row, etc. But I don't know how to make responsive height for the small images. Each small images need to be 50% height of the big one, but I don't really know how to achieve that. I looked a lot to find kind of masonry javascript, but the demos aren't giving me a lot of informations. Me it's not really masonry with responsive widht and height to match the screen, but it's kind of fixed, but responsive at the same time.

 

For now I tried with :

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <!-- TRES IMPORTANT -->
    <title>Photos</title>
    
    <link rel="stylesheet" type="text/css" href="styles/styles.css">
    
</head>
<body>
    
    <section>
    <div width="100%">
        <img src="images/DeathtoStock_Objects3.jpg" width="60%" float="left">
        <img src="images/DeathtoStock_Objects4.jpg" width="40%" float="left">
        <img src="images/DeathtoStock_Objects5.jpg" width="40%" float="left">    
    </div>
    
    
    
    </section>
    

</body>
</html>

But it gave me something like that :

1456320999-capture-d-ecran-2016-02-24-a-

 

Thank you to help me fixe my problem.

Link to comment
Share on other sites
Nic727 Member

Nic727

Posted
  • Author
Posted

I changed the code to that :

 <section>
    <div width="100%">
        <div style=" width:60%; float:left; "><img src="images/DeathtoStock_Objects3.jpg" width="100%">            </div>
       <div style="width:39%; float: left;">
        <img src="images/DeathtoStock_Objects4.jpg" width="100%">
        <img src="images/DeathtoStock_Objects5.jpg" width="100%"> 
        </div>   
    </div>
    
    
    
    </section>

I have that now :

1456323682-capture-d-ecran-2016-02-24-a-

 

How can I make the height 50% of the big photo?

Link to comment
Share on other sites
Nic727 Member

Nic727

Posted
  • Author
Posted (edited)

yes, but it wasn't what I was looking for. My think could work without masonry, but I'm looking at how to achieve it with CSS and maybe a javascript code to make things responsive.

 

Do you have any idea on how I can achieve this design with one big image on the left and 2 small on the right? Personally, I have no idea about the code I need. Should I use div background image instead of img? Can I center image inside the div?

 

EDIT : I got what I wanted, but it's not a really good solution.

 <div class="section" style="width:100%; overflow:hidden;">
        
        <div class="colonne-gauche" style="height:100%; width:67%; float:left; ">
            <img src="images/DeathtoStock_Objects3.jpg" width="100%">
        </div>
        <div class="colonne-droite" style="height:100%; width:33%; float: left;">
            <img src="images/DeathtoStock_Objects4.jpg" width="100%">
            <img src="images/DeathtoStock_Objects5.jpg" width="100%"> 
        </div> 
        
    </div>

So I just guess the widht for each columns to match the same height, but I'm sure that if I change image size it will be broken again...

 

So what I need is a code to make width change automatically to match the same height for the two columns.

Edited by Nic727
Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

I don't understand what is so tricky about this. Yes, you would need to allow the photos to find their own height, and you would need to use photos of exactly matching size, but there must be something else I'm not considering?

Link to comment
Share on other sites
Nic727 Member

Nic727

Posted
  • Author
Posted (edited)

Yes, but I'm asking if someone know the code for that?

I'm not good in JS...

 

Also, you can look my code live here : http://codepen.io/anon/pen/MygaEB

I have some weird border. I was going to add kind of small border between images, but I saw that I have automatic weird border. I tried with margin 0px on image, but doesn't work :(

Also if I remove background color, I'm unable to add a border to my images.

Edited by Nic727
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Because from 1 to 6th you would style these individually, on 7th element its styling will be exactly the same recurring style element as the 1st, 8th element the same as 2nd, 9th element same as 3rd and so on.... using nth-type(6n + 1) target element 1 and from that 6 element following it (1+ 6 = 7), you just have to get the first six to work, then as you add extra div the styling will automatically be carried over using nth-type().

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

Styling, float left or right would be obvious option, to what? That is for you to find out.

 

If I where you I‘d forget about images for the moment and concentrate on nine inner divs within parent with different background colors from top to 6th (using nth-type()), with remaining 3 taking on the stlying of first 3 divs.

 

Once you have got those correctly lined up with correct widths and temporary fixed heights, adding proportionately correct sized images will take the place of giving you the correct height so the temp fixed height can be removed.

Link to comment
Share on other sites
  • 2 weeks later...
Nic727 Member

Nic727

Posted
  • Author
Posted

Can you make a codepen? It will help me understand.

 

But there is no way with Javascript to kind of find height of each div and change width dynamically to make the two divs equal height? Like that if my images are changing ratio, it could work the same...

 

I created a question on stackoverflow, but it doesn't seem to work at all...

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted

If it is your webpage, and your images, then why can't you simply RESIZE all of the images so that each group of images are exactly the same size? Then you wouldn't need Javascript to do anything.

Link to comment
Share on other sites
Nic727 Member

Nic727

Posted
  • Author
Posted

Because if I change image ratio, because I want to cut something or whatever reason, it will stop working.

 

I don't know if it's working if for example, we take the div with the largest image, start it at 100% and reduce it with JS and with the second div, we start at 0% and go up. After that just stop when the two divs have the same height. But I don't know if something like that exist... Also it will need decimal.

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

No, everything should be percentages, if images are of identical ratio and you have 66.66% large div, with two 33.33% divs staked above each other next to the larger div, then by using 100% width with height auto on images will produce 50% height for two smaller div images, equalling the total height of the larger.

Link to comment
Share on other sites
Nic727 Member

Nic727

Posted
  • Author
Posted (edited)

So Javascript doesn't exist for this kind of thing (if I have different ratio)... I have to do everything manually with CSS.

 

Could it work with Flexbox?

 

Or can I just have height with % with body height 100% and set width to auto?

 

 

If not, I will just change my layout with big image on top with two small images bellow.

Edited by Nic727
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

For the layout in post #1, JavaScript is not required, you set the percentage width required for larger and smaller divs, the ratio height of images will correctly set the height of the two smaller divs combined to equal the total height of larger div whose height will be that of ratio image within that i.e double the height of one of smaller images equalling 100% height.

 

Again use width: 100%; with height: auto; this makes sure image resizes proportionately.

Link to comment
Share on other sites
Nic727 Member

Nic727

Posted
  • Author
Posted

Geeez? Ok go for that then, good luck!

I think I will keep %, because calculing aspect ratio will be so hard...

 

I think I will just try to crop all my image to be the same... Sad that there is no better idea than that to make something working with different aspect ratio like :

 

1457373223-capture-d-ecran-2016-03-07-a-

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

HOW would randomzing width only work? as described in post #23. Its all down to sizing you would have to insure that they are proportionately correct, correct size and in correct order to fit how shown in your example, the only way to get partially around this is to randomize first div width, this will set width of second, randomize height of second and third, make sure they fill the div height or width, and hide/crop parts of image that are outside the confinements of div, and somehow centre them possibly, unless you allow them stretch/shrink to fit causing them to distort.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...