CODEWITHSUNDEEP
htmlcssflexbox
akio
akio

Reputation: 1021

grid images using css flex

i would like to build grid image using flex css property like http://www.agefotostock.com/age/en/Search.aspx?perpage=20&query=lion

(use "row view" in display options)

when checking source code, i can see that flex property is dynamic(not the same on each picture).

Apparently the bigest pictures available is equal to 390px width or height (before resizing using flex).

i looking for since 2 weeks through stackoverflow, personal tries and "flex" documentation but without succes.

anyone can give me clues ? how calculate ratio or something else ?

thx in advance, regards !!

Upvotes: 2

Views: 1273

Answers (2)

akio
akio

Reputation: 1021

After some research ( and lot of cofee ) it seem that i found something interresting

Take a look at code HTML:

<div id="masonry">
  <div><img class="item" data-width="600" data-height="804" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></div>
  <div><img class="item" data-width="600" data-height="791" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></div>
  <div><img class="item" data-width="600" data-height="804" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></div>
  <div><img class="item" data-width="600" data-height="791" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></div>
  <div><img class="item" data-width="1000" data-height="579" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650"src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="700" data-height="932" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg"></div>
  <div><img class="item" data-width="1000" data-height="724" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg"></div>
  <div><img class="item" data-width="1000" data-height="579" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="700" data-height="932" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg"></div>
  <div><img class="item" data-width="1000" data-height="724" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg"></div>
  <div><img class="item" data-width="1000" data-height="600" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg"></div>
  <div><img class="item" data-width="600" data-height="799" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg"></div>
  <div><img class="item" data-width="600" data-height="804" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></div>
  <div><img class="item" data-width="600" data-height="791" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></div>
  <div><img class="item" data-width="1000" data-height="579" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="600" data-height="804" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/1.jpg"></div>
  <div><img class="item" data-width="600" data-height="791" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/2.jpg"></div>
  <div><img class="item" data-width="1000" data-height="579" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/3.jpg"></div>
  <div><img class="item" data-width="1000" data-height="650"src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/4.jpg"></div>
  <div><img class="item" data-width="700" data-height="932" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/6.jpg"></div>
  <div><img class="item" data-width="1000" data-height="724" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/8.jpg"></div>
  <div><img class="item" data-width="1000" data-height="600" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/9.jpg"></div>
  <div><img class="item" data-width="600" data-height="799" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/7.jpg"></div>    
</div>

CSS:

div#masonry { 
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    -webkit-align-items: stretch;
    -webkit-justify-content: space-around;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
}
div#masonry img {  
    position: static !important;
    bottom: auto !important;
    width: 100%;
    display: block;
    height: auto;
} 

#masonry div{
    display: -webkit-flex;
    -webkit-align-items: flex-end;
    -webkit-justify-content: space-around;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    width: 100%;
    height: auto;
    position: relative;
    margin-right: 5px;
    margin-left:5px;
    margin-bottom: 10px;
    float: left;
}

#masonry:after {
    -ms-flex: 20 150px;
    -webkit-flex: 20 150px;
    flex: 20 150px;
    display: block;
    content: ' ';
    height: 1px;
}

@media only screen and (min-width: 1200px){
    #masonry:after {
        -ms-flex: 500 300px;
        -webkit-flex: 500 300px;
        flex: 500 300px;
    }
}
@media only screen and (min-width: 992px){
    #masonry:after {
        -ms-flex: 100 250px;
        -webkit-flex: 100 250px;
        flex: 100 250px;
    }
}
@media only screen and (min-width: 768px){
    #masonry:after {
        -ms-flex: 50 200px;
        -webkit-flex: 50 200px;
        flex: 50 200px;
    }
}

JS(using jquery):

 $(document).ready(function(){
      var o = {};
      $("#masonry img").each(function(){
           o.base = parseInt($(this).data("width"),10)/parseInt($(this).data("height"),10);

           o.grow = Math.round(o.base*1e3)/100;
           o.h    = Math.round(190*o.base);

           $(this).parent().css("flex",o.grow+" "+o.h+"px");
           $(this).parent().css("min-height",Math.round(o.h/o.base));
      });
 });

codepen

Images have the same height in a row whatever orientation and dimensions.

A little bit of javascript to know the images's ratio for height desired and that's it.

Upvotes: 3

ctwheels
ctwheels

Reputation: 22817

This fiddle is close to what you want. It sizes all the images according to the set width and moves the images when the window is resized. It isn't perfect but it's a good start.

trWidthAllow is where you can start to build the rest of the function. It determines how many images can be fit (side-by-side) in the window (this can be changed to a parent div). It floors the value (round down) so that you don't get overflow (unless window is resized below (padding*2)+maxWidth in other words, the image width plus the padding-left and padding-right values)

HTML

<div id="myDiv">
    <table>
        <tr>
            <td class="thing">
                <img src="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg">
                <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/687/cache/bonobo-congo-ziegler_68751_990x742.jpg">
                <img src="http://static6.businessinsider.com/image/51c3212a6bb3f79c2000000f/this-space-picture-changes-our-understanding-of-how-black-holes-form.jpg">
                <img src="http://images.nationalgeographic.com/wpf/media-live/photos/000/411/cache/northern-lights-picture-aurora-borealis-september-2011-yukon_41173_600x450.jpg">
            </td>
        </tr>
    </table>
</div>

CSS

table, tr, td {
    padding:0px;
    margin:0px;
    border:none;
}
#myDiv {
}
img {
    padding:5px;
    margin:0px;
}

JS

$(document).ready(function () {
var maxWidth = 390;

var windowWidth = $(window).width();
var imgPadding = parseInt($(".thing img").css("padding"), 10);
var trWidthAllow = Math.floor(windowWidth / (maxWidth + (imgPadding * 2)));
//alert(trWidthAllow);
//alert(windowWidth);
//alert(imgPadding);
var ratio;
var numImgItems = $(".thing img").length;
//alert(numImgItems);
for (var i = 0; i < numImgItems; i++) {
    var actualWidth = $(".thing img:eq(" + i + ")").width();
    var actualHeight = $(".thing img:eq(" + i + ")").height();
    ratio = actualWidth / maxWidth;
    $(".thing img:eq(" + i + ")").css({
        width: maxWidth + "px",
        height: actualHeight / ratio + "px"
    });
    //alert(actualWidth + "; " + actualHeight);
}
/*$(".thing").addClass("myClass");*/
});

Upvotes: 0

Related Questions