Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
<script src="http://code.jquery.com/jquery-git1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
    <div class="container">
      <div class="photo">1</div>
      <div class="photo">2</div>
      <div class="photo">3</div>
      <div class="photo">4</div>
      <div class="photo">5</div>
      <div class="photo">6</div>
      <div class="photo">7</div>
      <div class="photo">8</div>
      <div class="photo">9</div>
    </div>
  </body>
</html>
 
.container {
  display:inline-flex;
  flex-flow: column wrap;
  height: 350px;
  background : blue;
  overflow: auto;
}
​
.photo {
  width : 150px;
  height:100px;
  background : red;
  margin : 2px;
}
 
$(window).resize(function(){
  $('.container').each(function(){
    var t = $(this);
    var c = $(this).children();
    var f = c.height() / c.width();
    var w = t.width() * f;
    t.height(w);
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
rafaelcastrocoutopro
0viewers