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 ...
随机推荐
- 在iframe下的页面锚点失效问题,用jquery进行修复
应用场景是:iframe页面没有滚动条,在父窗体中出现滚动条,锚点标记就会失效,因为,锚点是根据当前窗口滚动条滚动窗口的,成为子窗体后没有了滚动条,自然不会滚动. 解决办法是:用js判断页面是否被嵌套 ...
- 客户端TortoiseSVN的安装及使用方法
一.客户端TortoiseSVN的安装 运行TortoiseSVN程序,点击Next,下面的截图顺序即为安装步骤: 图1: 图2: 图3: 图4: 点击Finish按钮后会提示重启系统,其实不重启也没 ...
- bzoj3135: [Baltic2013]pipesd
Description 有n个水库,m条管道.Jester会在某些管道中间凿开一个洞,让水流出来或者用水泵把水打进去.保证这个流速是偶数.对于一条管道(u, v),如果在中间凿开了一个洞让水流出来,流 ...
- 源码安装extundelete以及对遇到问题的解决
软件下载:http://sourceforge.net/projects/extundelete/ 1.在安装extundelete包./configure时遇到configure: error: C ...
- SQL语句技巧_索引的优化_慢查询日志开启_root密码的破解
1.正则表达式的使用 regexp例:select name,email from t where email regexp '@163[.,]com$'使用like方式查询selct name,em ...
- hadoop mapred-queue-acls 配置(转)
hadoop作业提交时可以指定相应的队列,例如:-Dmapred.job.queue.name=queue2通过对mapred-queue-acls.xml和mapred-site.xml配置可以对不 ...
- 在指定路径下查找并打印mdb类型文件
1 #encoding:utf8 import os fpath = 'D:\Download\LP传奇-麒麟传说\Date' rfile = '' files = [] mdbFiles = [] ...
- Shell_Shell调用SQLPlus简介(案例)
2014-06-20 Created By BaoXinjian
- HDU 1272 小希的迷宫(并查集)
题解: 首先,init,find,union操作都是模版,多敲几遍,在记记,就没问题了. 然后,本题就是多了一个flag数组,记录数据是否出现过,最后记录最小,和最大,遍历一般他们的父亲,只有一个就是 ...
- linux命令(10)使用kill杀死含有指定关键字的进程
命令:ps -ef|grep keyword|grep -v grep|cut -c 9-15|xargs kill -9 批量杀死包含关键字“keyword”的进程. "ps -ef&qu ...