Skip to content

Instantly share code, notes, and snippets.

@feo52

feo52/index.html

Created January 3, 2016 06:00
Show Gist options
  • Save feo52/68e22770ed6be0a1b552 to your computer and use it in GitHub Desktop.
Save feo52/68e22770ed6be0a1b552 to your computer and use it in GitHub Desktop.
Download ZIP
Masonry
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.grid {
max-width: 900px; /* 900=(140+40)x5 */
margin: 0 auto;
box-shadow: 0 0 0 1px #eee;
}
.grid .grid-item { width: 140px; }
.grid .grid-item.x2 { width: 320px; }
.grid .grid-item.x3 { width: 500px; }
.grid .grid-item.x4 { width: 680px; }
.grid .grid-item.x5 { width: 860px; }
.grid .grid-item {
margin: 10px;
padding: 10px;
box-shadow: 0 0 0 1px #eee;
}
.grid .grid-prop {
width:100%;
height: 0;
border: 0;
margin: 0;
padding: 0;
box-shadow: 0 0 0 0px rgba(0,0,0,0);
}
.grid .grid-flat {
margin: 0 10px;
padding: 0 10px;
box-shadow: 0 0 0 0px rgba(0,0,0,0);
}
.grid .grid-flat h3 {
margin-bottom: 0;
color: #777777;
}
.grid .grid-item p {
font-size: 12px;
color: #999999;
}
.grid .grid-item h4 {
color: #777777;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item grid-flat"></div>
<div class="grid-item grid-prop"></div>
<div class="grid-item grid-flat"><h3>東日本<p><a class="gmaplink" href="?area=12">[地図]</a></p></h3></div>
<div class="grid-item grid-prop"></div>
<div class="grid-item "><h4>札幌市 </h4><p>〒060-8611<br />北海道札幌市中央区北1条西2丁目 </p><p><a class="gmaplink" href="?data=CITY01100">[地図]</a></p></div>
<div class="grid-item "><h4>仙台市 </h4><p>〒980-8671<br />宮城県仙台市青葉区国分町三丁目7番1号 </p><p><a class="gmaplink" href="?data=CITY04100">[地図]</a></p></div>
<div class="grid-item "><h4>千葉市 </h4><p>〒260-8722<br />千葉県千葉市中央区千葉港1番1号 </p><p><a class="gmaplink" href="?data=CITY12100">[地図]</a></p></div>
<div class="grid-item "><h4>横浜市 </h4><p>〒231-0017<br />神奈川県横浜市中区港町1丁目1番地 </p><p><a class="gmaplink" href="?data=CITY14100">[地図]</a></p></div>
<div class="grid-item "><h4>川崎市 </h4><p>〒210-8577<br />神奈川県川崎市川崎区宮本町1番地 </p><p><a class="gmaplink" href="?data=CITY14130">[地図]</a></p></div>
<div class="grid-item x2 "><h4>名古屋市</h4><p>〒460-8508<br />愛知県名古屋市中区三の丸三丁目1番1号 </p><p><a class="gmaplink" href="?data=CITY23100">[地図]</a></p></div>
<div class="grid-item grid-prop"></div>
<div class="grid-item grid-flat"><h3>西日本<p><a class="gmaplink" href="?area=18">[地図]</a></p></h3></div>
<div class="grid-item grid-prop"></div>
<div class="grid-item x2 "><h4>京都市 </h4><p>〒604-8571<br />京都府京都市中京区寺町通御池上る上本能寺前町488番地</p><p><a class="gmaplink" href="?data=CITY26100">[地図]</a></p></div>
<div class="grid-item "><h4>大阪市 </h4><p>〒530-8201<br />大阪府大阪市北区中之島一丁目3番20号 </p><p><a class="gmaplink" href="?data=CITY27100">[地図]</a></p></div>
<div class="grid-item "><h4>神戸市 </h4><p>〒650-8570<br />兵庫県神戸市中央区加納町六丁目5番1号 </p><p><a class="gmaplink" href="?data=CITY28100">[地図]</a></p></div>
<div class="grid-item "><h4>広島市 </h4><p>〒730-8586<br />広島県広島市中区国泰寺町一丁目6番34号</p><p><a class="gmaplink" href="?data=CITY34100">[地図]</a></p></div>
<div class="grid-item x2 "><h4>北九州市</h4><p>〒803-8501<br />福岡県北九州市小倉北区城内1番1号 </p><p><a class="gmaplink" href="?data=CITY40100">[地図]</a></p></div>
<div class="grid-item "><h4>福岡市 </h4><p>〒810-8620<br />福岡県福岡市中央区天神一丁目8番1号 </p><p><a class="gmaplink" href="?data=CITY40130">[地図]</a></p></div>
</div>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.2/masonry.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
<script>
$(function(){
$('.grid').imagesLoaded(function(){
$('.grid').masonry({
itemSelector: '.grid-item',
columnWidth: '.grid-item',
/* columnWidth: 180, */
});
});
});
$(window).resize(function(){
$('.grid').masonry('layout');
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment