blocksit-白红宇

blocksit

阅读量：7106 次

发布时间：2019-06-28

本文共 4282 字，大约阅读时间需要 14 分钟。

	<!DOCTYPE html>
	<html>
	<head>
	<title>Sc.Chinaz.Com</title>
	<link rel='stylesheet' href='' media='screen' />
	<script src=""></script>
	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<script src=""></script>
	<script>
	$(document).ready(function() {
	//vendor script
	$('#header')
	.css({ 'top':-50 })
	.delay(1000)
	.animate({'top': 0}, 800);

	$('#footer')
	.css({ 'bottom':-15 })
	.delay(1000)
	.animate({'bottom': 0}, 800);

	//blocksit define
	$(window).load( function() {
	$('#container').BlocksIt({
	numOfCol: 5,
	offsetX: 8,
	offsetY: 8
	});
	});

	//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>

	<!-- Header -->
	<header id="header">
	<h1>BlocksIt.js \| Dynamic Grid Layout jQuery Plugin</h1>
	<div id="backlinks">
	<a href="">Back to Home Page »</a>
	<a href="">Sc.Chinaz.Com</a>
	</div>
	<div class="clearfix"></div>
	</header>

	<!-- Content -->
	<section id="wrapper">
	<hgroup>
	<h2>BlocksIt.js Demonstration 2</h2>
	<h3>Pinterest Dynamic Grid Layout with CSS3 Transitions (RESIZE)</h3>
	</hgroup>
	<div id="container">
	<div class="grid">
	<div class="imgholder">
	<img src="" />
	</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="" />
	</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="" />
	</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="" />
	</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="" />
	</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="" />
	</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="" />
	</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="" />
	</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="" />
	</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="" />
	</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="" />
	</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="" />
	</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="" />
	</div>
	<strong>Beach</strong>
	<p>Something on beach...</p>
	<div class="meta">by unknown</div>
	</div>
	<div class="grid">
	<div class="imgholder">
	<img src="" />
	</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="" />
	</div>
	<strong>Alone</strong>
	<p>Lonely plant...</p>
	<div class="meta">by Zsolt Zsigmond</div>
	</div> <!---->
	</div>
	</section>

	<!-- Footer -->
	<footer id="footer">
	<span>© 2012 <a href="">Sc.Chinaz.Com</a>.</span>
	</footer>

	</body>
	</html>