<!DOCTYPE html>
<html>
<head>
<title>jQuery网格布局瀑布流插件Freewall - 网页模板</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type">
<link rel="stylesheet" type="text/css" href="example/css/style.css" />
<script type="text/javascript" src="example/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="freewall.js"></script>
<script type="text/javascript" src="example/js/index.js"></script>
<script type="text/javascript">
$(function() {
app.setup({
share: 1,
color: 1,
logo: 1,
layout: 1,
events: 1,
methods: 1,
options: 1,
preload: 1
});
});
</script>
<style type="text/css">
.free-wall {
margin: 15px;
}
</style>
</head>
<body>
<div class='header'>
<div class="clearfix">
<div class="float-left">
<h1>Free Wall</h1>
<div class='target'>Creating dynamic grid layouts.</div>
</div>
<ul class="float-right reponsive-block">
<li><a class="desktop active" data-width="auto"></a></li>
<li><a class="tablet-landscape" data-width="1024"></a></li>
<li><a class="tablet-portrait" data-width="768"></a></li>
<li><a class="iphone-landscape" data-width="960"></a></li>
<li><a class="iphone-portrait" data-width="640"></a></li>
</ul>
</div>
</div>
<div id="freewall-logo" class="free-wall-logo"></div>
<div id="freewall" class="free-wall">
<div class="brick size33" data-fixSize=0 >
<div class='cover'>
<h2>What is Freewall?</h2>
<p>
Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nested grid layouts, metro style layouts, pinterest like layouts ... with nice CSS3 animation effects and call back events. Freewall is all-in-one solution for creating dynamic grid layouts for desktop, mobile and tablet.
</p>
<h4>Some example layouts:</h4>
<br/>
<ul class="img-demo">
<li>
<a href="example/flex-grid.html" target="_blank">
<img src="i/flex.png" width=98 height=98 />
<h3>Flex layout</h3>
</a>
</li>
<li>
<a href="example/metro-style.html" target="_blank">
<img src="i/metro.png" width=98 height=98 />
<h3>Window 8</h3>
</a>
</li>
<li>
<a href="example/image-layout.html" target="_blank">
<img src="i/image.png" width=98 height=98 />
<h3>Images layout</h3>
</a>
</li>
<li>
<a href="example/pinterest-layout.html" target="_blank">
<img src="i/pinterest.png" width=98 height=98 />
<h3>Pinterest layout</h3>
</a>
</li>
</ul>
</div>
</div>
<div class="brick size22" data-fixSize=0>
<div class='cover'>
<h2> How it works </h2>
<p>
Based on the width (or height) of a container and the width (height) of a cell unit, It will create a virtual matrix. Scaning the matrix at each cell will find a free cell around to made a free area, then try to fit a block element into it. In case no block can fit the gap, it will resize the block to fill the gap (that is one of the options).
</p>
</div>
</div>
<div class="size22" data-nested=".brick" data-fixSize=0>
<div class="brick size11">
</div>
<div class="brick size12" data-fixSize=0>
<div class='cover'>
<h2>Share</h2>
<div class="twitter-share">Twitter</div>
<div class="google-share">Google +</div>
<div class="facebook-share">Facebook</div>
</div>
</div>
</div>
<div class="donate size11">
<form action="http://www.moobnn.com/jiaoben/" method="post" target="_blank">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="SZSGB3GJ3T4VU">
<input class="paypal" type="image" src="example/i/donate.png" border="0" name="submit" alt="">
<div align="center">Buy me a beer :)</div>
</form>
</div>
<div class="brick size36" data-fixSize=0 >
<div class='cover'>
<a class='float-left' href="example/getting-started.html" target="_blank">
<h2>Getting started</h2>
<div>
<p> Freewall requires jQuery or Zepto framework. It requires browsers which support CSS3 for some nice animation effects.</p>
<pre>
<code>
<!DOCTYPE html>
<html>
<head>
<title> freewall demo getting started</title>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="../freewall.js"></script>
<style type="text/css">
#container {
width: 80%;
margin: auto;
}
.item {
background: rgb(135, 199, 135);
width: 320px;
height: 320px;
}
</style>
</head>
<body>
<div id="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<script>
$(function() {
var wall = new freewall("#container");
wall.fitWidth();
});
</script>
</body>
</html>
</code>
</pre>
</div>
<div class="read-more">View detail ...</div>
</a>
</div>
</div>
<div class="brick size23">
<div class='cover'>
<h2>Features</h2>
<ul>
<li> Draggable support </li>
<li> Direction support </li>
<li> Custom plugin</li>
<li> Responsive grid </li>
<li> Gaps control </li>
<li> Filter items </li>
<li> CSS3 animation (js fallback) </li>
<li> Nested grid </li>
<li> Images grid/layout </li>
<li> Fit container </li>
<li> Vertical grid/layout </li>
<li> Horizontal grid/layout </li>
<li> Window 8 metro style </li>
<li> Pinterest like grid/layout </li>
</ul>
</div>
</div>
<div class="brick size23 options">
<div class='cover' id="options">
<div class='float-left'>
<h2>Options</h2>
<ul>
<li> draggable </li>
<li> animate </li>
<li> cellW </li>
<li> cellH </li>
<li> delay </li>
<li> fixSize </li>
<li> gutterX </li>
<li> gutterY </li>
<li> selector </li>
<li> rightToLeft </li>
<li> bottomToTop </li>
</ul>
<div class="read-more">View detail ...</div>
</div>
<div class='desc'>
<h2>
<span>Options</span>
</h2>
<h3>All options are parameters of <i>Reset</i> method</h3>
<ul>
<li>
<h3> draggable : boolean </h3>
<div>
Default: false <br/>
True: to make block can be drag & drop</div>
</li>
<li>
<h3> animate : boolean </h3>
<div> True: to make block move with animation</div>
</li>
<li>
<h3> cellW: mix </h3>
<div>
Default: 100 <br/>
The width of unit, base on it will build grid container.
It can be a function and return value.
</div>
<h3> Example </h3>
<pre>
<code>
var wall = new freewall('.free-wall');
wall.reset({
selector: '.brick',
cellW: function(width) {
var cellWidth = width / 3;
return cellWidth - 20;
},
cellH: 160
});
</code>
</pre>
</li>
<li>
<h3> cellH: mix </h3>
<div>
Default: 100 <br/>
The height of unit, base on it will build grid container.
It can be a function and return value.
</div
jQuery网格布局瀑布流插件Freewall.zip （19个子文件） 
jQuery网格布局瀑布流插件Freewall 
jQuery网格布局瀑布流插件Freewall.jpg 126KB jiaoben2146 example css 
style.css 9KB i 
tw.png 4KB fb.png 4KB reponsive.png 3KB forkme.png 7KB donate.png 12KB download.png 2KB back.png 3KB js.png 2KB gp.png 5KB js index.js 10KB jquery-1.10.2.min.js 91KB i image.png 1KB metro.png 3KB pinterest.png 1KB flex.png 1KB freewall.js 45KB
index.html 19KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
