treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Flexible Tile Layout

  • I am creating a template for a blog and in this template I am going to be laying out the posts in a windows 8-esk fashion.

    Example: http://s10.postimage.org/6qd18bou1/Metro_Tile_Navigation_Test_Correct.png

    Now the problem I am running into is trying to figure out how to make it work the way i want it to.

    The way I want it to work is all post except posts with images will be displayed in a 1x1 tile and posts with images will be displayed in a 2x2 tile.(1x1 tile is = to 243px X 243px). When you click on a 1x1 tile it will then turn into a 1x2 tile and display an excerpt of the post which would cause the rest of the tiles adapt. Also the initial layout the tiles have to be dynamic since there will be no certain order of the sizes of tiles they will be displayed newest to oldest.

    Can anyone help or point me in the right direction? This will be something I could put on CodePen after I get it working correctly.
  • Take a look at Naomi Atkinson's site that uses Masonry.js.

  • Perhaps you might like to get started in Codepen?

    You might want to look into masonry.js

    Oh...snap