<!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 &raquo;</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>&copy; 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的更多相关文章

  1. Mvc利用淘宝Kissy uploader实现图片批量上传附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  2. jQuery制作瀑布流(转)

    “瀑布流布局”随着pinterest网的流行而出名,现在国内使用这种风格布局的网站也越来越多,比如说Mark之,蘑菇街,点点网,哇哦等等.我第一次听到这个布局名称是来自于“乔花写的<瀑布流布局浅 ...

  3. Mvc Kissy uploader实现图片批量上传 附带瀑布流的照片墙

    前言 KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架.它具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性.本人在一次项目中层使用这个uploader组件. ...

  4. jQuery插件之-瀑布流插件

    jquery.wookmark.js 一个实现瀑布流自适应宽度布局的jQuery插件—jquery.wookmark.js , wookmark使用非常简单到只需要一句代码就能实现,除此之外,当页面宽 ...

  5. jQuery超酷响应式瀑布流效果

    参考 http://www.sucaihuo.com/js/74.html <script src="scripts/blocksit.min.js"></scr ...

随机推荐

  1. eclipse使用基础--让toolbar显示自己想要的内容

    windows==>customize perspective

  2. 【KVM】Ubuntu14.04 安装KVM

    1. 首先检查系统是否支持CPU虚拟化 # egrep -o "svm|vmx" /proc/cpuinfo 若显示如下类似信息,则说明支持CPU虚拟化 vmx vmx ... v ...

  3. js封常用类

    ajax刷 下拉框联动 /*基础初始化类*/ $.EBC = { setCourse:function(obj){ $(obj).empty(); $.get('../Index/getCoursei ...

  4. Dell R410 broadcom网卡驱动更新失败

    问题描述: 最近遇到一个Dell R410 broadcom网卡驱动更新失败的问题.从官网上下载的驱动在安装的过程中都会自己回滚回来,很是困惑. 尝试解决: Dell官网现在提供的驱动一般最少有两种格 ...

  5. Python 创建和发布安装函数模块

    1. create dir "nester" under C:\Users\eric\AppData\Local\Programs\Python\Python35-32\ 2. c ...

  6. 黄聪：Xmind修改默认字体风格设置

    Xmind是一款非常好用的思维导图软件,但默认字体使用宋体不够好看,软件本身不支持设置默认字体,但通过修改配置文件达到配置默认字体的目的 默认控制风格的配置文件位置 XMind\plugins\org ...

  7. Linux进程内存分析pmap命令(转)

    名称:       pmap - report memory map of a process(查看进程的内存映像信息)用法       pmap [ -x | -d ] [ -q ] pids... ...

  8. HtmlParser + HttpClient 实现爬虫

    简易爬虫的实现 HttpClient 提供了便利的 HTTP 协议访问,使得我们可以很容易的得到某个网页的源码并保存在本地:HtmlParser 提供了如此简便灵巧的类库,可以从网页中便捷的提取出指向 ...

  9. Codeforces Round #364 (Div. 2) Cards

    Cards 题意: 给你n个牌,n是偶数,要你把这些牌分给n/2个人,并且让每个人的牌加起来相等. 题解: 这题我做的时候,最先想到的是模拟,之后码了一会,发现有些麻烦,就想别的方法.之后发现只要把它 ...

  10. centos6.5安装配置fastdfs+nginx实现分布式图片服务器

    一.准备 yum groupinstall -y "Development Tools"yum install -y wget libevent-devel pcre-devel ...