blocksit
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Sc.Chinaz.Com</title> | |
<link rel='stylesheet' href='style.css' media='screen' /> | |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
<!--[if lt IE 9]> | |
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
<![endif]--> | |
<script src="../blocksit.min.js"></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="http://Sc.Chinaz.Com/">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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/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="http://www.inwebson.com/demo/blocksit-js/demo2/images/img20.jpg" /> | |
</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="http://Sc.Chinaz.Com">Sc.Chinaz.Com</a>.</span> | |
</footer> | |
</body> | |
</html> |
http://demo.sc.chinaz.com/Files/DownLoad/webjs/jiaoben67/demo2/
blocksit的更多相关文章
- Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙
前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...
- jQuery制作瀑布流(转)
“瀑布流布局”随着pinterest网的流行而出名,现在国内使用这种风格布局的网站也越来越多,比如说Mark之,蘑菇街,点点网,哇哦等等.我第一次听到这个布局名称是来自于“乔花写的<瀑布流布局浅 ...
- Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙
前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...
- jQuery插件之-瀑布流插件
jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...
- jQuery超酷响应式瀑布流效果
参考 http://www.sucaihuo.com/js/74.html <script src="scripts/blocksit.min.js"></scr ...
随机推荐
- [Hibernate] - many to one
Hibernate的多对一操作: 例子参考引用: http://www.tutorialspoint.com/hibernate/hibernate_many_to_one_mapping.htm h ...
- SPOJ #692. Fruit Farm
Another palindrome related problem. Actually nothing too theoretical here, but please keep following ...
- android 插件化开发 开源项目列表
开源的插件化框架 Qihoo360/DroidPlugin CtripMobile/DynamicAPK mmin18/AndroidDynamicLoader singwhatiwanna/dyna ...
- 剑指offer系列28--字符流中第一个不重复的字符
[题目]请实现一个函数用来找出字符流中第一个只出现一次的字符.例如,当从字符流中只读出前两个字符”go”时,第一个只出现一次的字符是”g”.当从该字符流中读出前六个字符“google”时,第一个只出现 ...
- net farmework 4安装不了 原因是 HRESULT 0xc8000222
1. Click Start, Run, type: cmd and press Enter. Please run the following command in the opened windo ...
- linux svn迁移备份的三种方法
原文:http://www.iitshare.com/linux-svn-migration.html svn备份方式对比分析 一般采用三种方式: 1.svnadmin dump 2.svnadmin ...
- Bellman-Ford & SPFA 算法——求解单源点最短路径问题
Bellman-Ford算法与另一个非常著名的Dijkstra算法一样,用于求解单源点最短路径问题.Bellman-ford算法除了可求解边权均非负的问题外,还可以解决存在负权边的问题(意义是什么,好 ...
- 访问修饰符private
private(C# 参考) private 关键字是一个成员访问修饰符. 私有访问是允许的最低访问级别. 私有成员只有在声明它们的类和结构体中才是可访问的,如下例所示: class Employee ...
- JavaScript权威指南 第二章 词法结构
这章主要把保留字说一下 JavaScript 把一些标识符拿出来用做自己的关键字.因此,就不能再在程序中把这些关键字用做标识符了: break delete function return typeo ...
- javascript实现继承的几种方式
原型链方式实现继承 function SuperType(){ this.property = true; this.colors = ['red','blue','green']; } SuperT ...