Dynamic Grid Layout（jQuery Masonry） - Webサイト制作科

ブログ・HTML5の勉強「Dynamic Grid Layout」

Dynamic Grid Layoutとは

コンテンツがブラウザ幅に応じて自動的に整列する機能。jQuery。
動かしながら見ることはあるかな？

jQuery Masonryのファイルについて

jQuery Masonryのjsファイルは、サイトの[Download these docs]をクリックし、[masonry-docs]→[js]フォルダ内の[masonry-docs.js]か[masonry-docs.min.js]を使う。
あと、CSSでtransition-propertyやtransition-durationを使っているので、ベンダープレフィックスとIE対策のhtml5shiv.jsも使う。

作例

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Dynamic Grid Layout</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="html5shiv.js"></script/>
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="masonry.min.js"></script>
<script>
var flag;
var min_width = 610;
function masonrySwitch() {
if ( $(window).innerWidth() < min_width ) {
if ( flag ) {
  $('#container').masonry('destroy');
  flag = false;
}
} else {
$('#container').imagesLoaded( function(){
  $('#container').masonry({
    itemSelector: '.item',
    isFitWidth: true,
    columnWidth: 200
  });
});
flag = true;
}
}
$(function(){
masonrySwitch();
});
$(window).bind('resize',function(){
masonrySwitch();
});
</script>
</head>
<body>
<header>
  <h1>Responsive Web Design</h1>
</header>
<div id="container">
  <div class="item col3">
    <img src="img/pic_01.jpg" alt="">
    <h2>Headline</h2>
    <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to</p>
  </div>
  <div class="item col1">
  <img src="img/pic_02.jpg" alt="">
  <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with</p>
  </div>
  <div class="item col1">
  <img src="img/pic_03.jpg" alt="">
  <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with</p>
  </div>
  <div class="item col2">
  <img src="img/pic_04.jpg" alt="">
  <h2>Headline</h2>
  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts</p>
  </div>
  <div class="item col2">
  <img src="img/pic_05.jpg" alt="">
  <h2>Headline</h2>
  <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with</p>
  </div>
  <div class="item col1">
  <img src="img/pic_06.jpg" alt="">
  <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with</p>
  </div>
  <div class="item col1">
  <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with</p>
  </div>
  <div class="item col1">
  <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with</p>
  </div>
  <div class="item col1">
  <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with</p>
  </div>
</div><!--container-->
<footer>
  <small>Copyright (c) Responsive web design</small>
</footer>
</body>
</html>

CSS（normalizeはダウンロードしたものなので省略）

@charset "utf-8";
/* CSS Document */
body{
  max-width:1100px;
  min-width:320px;
  margin:0 auto;
  line-height:1.5;
  color:#333;
  font-size:100%;
  font-family:serif,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "ＭＳ Ｐゴシック";
  background: url(img/bg_body.png);
}
.clearfix{
  zoom: 1;
}
.clearfix:after{
  content: "";
  display: block;
  clear: both;
}
img{
  max-width: 100%;
  height: auto;
}

header h1{
  line-height: 1.1;
  font-size: 3em;
  font-weight: normal;
  font-family: serif;
  color: #000;
  text-align: center;
  text-shadow: 1px 1px 0 #fff;
}
h2{
  margin: 0.5em 0;
  font-size: 2em;
  font-weight: normal;
  font-family: serif;
}
.item{
  margin: 5px;  
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 1px #333;
}
#container{
  margin: 0 auto;
  padding: 5px;
  background: rgba(0,0,0,0.1);
}
#container .col1{width: 170px;}
#container .col2{width: 370px;}
#container .col3{width: 570px;}
/*animation*/
#container,
#container .masonry-brick {
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;
  -o-transition-duration: 0.7s;
  transition-duration: 0.7s;
}
#container {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}
#container .masonry-brick {
  -webkit-transition-property: left, right, top;
  -moz-transition-property: left, right, top;
  -o-transition-property: left, right, top;
  transition-property: left, right, top;
}

footer{
  padding: 30px;
  text-align: center;
}

/*media Queries*/
@media screen and (max-width:610px){
  .item{
    margin: 0 0 10px;
    padding: 2.5%;
  }
  #container{
    width:auto !important;
  }
  #container .col1{
    overflow:hidden;
    width:95%;
  }
  #container .col1 img{
    float:left;
    width:40%;
    margin: 0 0.5em 0.5em 0;
  }
  #container .col2{
    width:95%;
  }
  #container .col3{
    width:95%;
  }
  #contaier img + p{
    margin-top: 0;
  }
  #container{
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
  }
  #container .masonry-brick{
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
  }
}