<!DOCTYPE html>
<html>
<head>
<title>jQuery瀑布流插件BlocksIt - 网页模板</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel='stylesheet' href='css/style.css' media='screen' />
<script src="js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="js/blocksit.min.js"></script>
<script>
$(document).ready(function() {
//blocksit define
$(window).load( function() {
$('#container').BlocksIt({
numOfCol: 5,
offsetX: 8,
offsetY: 8,
blockElement: '.grid'
});
});
//window resize
var currentWidth = 1100;
$(window).resize(function() {
var winWidth = $(window).width();
var conWidth;
if(winWidth < 660) {
conWidth = 440;
col = 2
} else if(winWidth < 880) {
conWidth = 660;
col = 3
} else if(winWidth < 1100) {
conWidth = 880;
col = 4;
} else {
conWidth = 1100;
col = 5;
}
if(conWidth != currentWidth) {
currentWidth = conWidth;
$('#container').width(conWidth);
$('#container').BlocksIt({
numOfCol: col,
offsetX: 8,
offsetY: 8
});
}
});
});
</script>
</head>
<body>
<!-- Content -->
<section id="wrapper">
<hgroup>
<h2>jQuery瀑布流布局插件BlocksIt</h2>
</hgroup>
<div id="container">
<div class="grid">
<div class="imgholder">
<img src="images/img27.jpg" />
</div>
<strong>Sunset Lake</strong>
<p>A peaceful sunset view...</p>
<div class="meta">by j osborn</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img26.jpg" />
</div>
<strong>Bridge to Heaven</strong>
<p>Where is the bridge lead to?</p>
<div class="meta">by SigitEko</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img15.jpg" />
</div>
<strong>Autumn</strong>
<p>The fall of the tree...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img23.jpg" />
</div>
<strong>Winter Whisper</strong>
<p>Winter feel...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img17.jpg" />
</div>
<strong>Light</strong>
<p>The only shinning light...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img22.jpg" />
</div>
<strong>Rooster's Ranch</strong>
<p>Rooster's ranch landscape...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img16.jpg" />
</div>
<strong>Autumn Light</strong>
<p>Sun shinning into forest...</p>
<div class="meta">by Lars van de Goor</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img21.jpg" />
</div>
<strong>Yellow cloudy</strong>
<p>It is yellow cloudy...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img28.jpg" />
</div>
<strong>Herringfleet Mill</strong>
<p>Just a herringfleet mill...</p>
<div class="meta">by Ian Flindt</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img2.jpg" />
</div>
<strong>Battle Field</strong>
<p>Battle Field for you...</p>
<div class="meta">by Andrea Andrade</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img24.jpg" />
</div>
<strong>Sundays Sunset</strong>
<p>Beach view sunset...</p>
<div class="meta">by Robert Strachan</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img19.jpg" />
</div>
<strong>Sun Flower</strong>
<p>Good Morning Sun flower...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img5.jpg" />
</div>
<strong>Beach</strong>
<p>Something on beach...</p>
<div class="meta">by unknown</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img25.jpg" />
</div>
<strong>Flowers</strong>
<p>Hello flowers...</p>
<div class="meta">by R A Stanley</div>
</div>
<div class="grid">
<div class="imgholder">
<img src="images/img20.jpg" />
</div>
<strong>Alone</strong>
<p>Lonely plant...</p>
<div class="meta">by Zsolt Zsigmond</div>
</div> <!---->
</div>
</section>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery瀑布流插件BlocksIt.zip
版权申诉
127 浏览量
2022-11-21
11:32:59
上传
评论
收藏 274KB ZIP 举报
jQuery瀑布流插件BlocksIt.zip （21个子文件） 
jQuery瀑布流插件BlocksIt 
jQuery瀑布流插件BlocksIt.jpg 90KB jiaoben1640 css 
bg.gif 4KB
style.css 3KB images img26.jpg 5KB img17.jpg 12KB img2.jpg 8KB img20.jpg 7KB img22.jpg 7KB img27.jpg 12KB img25.jpg 11KB img21.jpg 7KB img23.jpg 8KB img19.jpg 8KB img28.jpg 6KB img16.jpg 24KB img24.jpg 7KB img5.jpg 11KB img15.jpg 23KB
index.html 5KB js jquery.min.js 92KB blocksit.min.js 2KB资源评论
