blocksit.js绘制移动端瀑布流样式

来源：互联网发布：js特效很好看的网站编辑：程序博客网时间：2024/05/16 18:08

blocksit.js官方的demo有两个，适用于pc端浏览器的缩放来改变瀑布的列数；

我修改了一下适用于移动端；默认设置显示两列；

代码基本如下：style.css

body {margin: 0;padding: 0;background: url(bg.gif) 0 0 repeat #f7f5f5;color: #333;font-family: Cambria, Georgia, serif;font-size: 15px;overflow-x: hidden;}header, section, footer, hgroup {display: block;}a {color: #35BFFF;text-decoration: none;}a:hover, a:active {color: #91DCFF;}#backlinks {float: right;padding: 0 20px;line-height: 22px;font-weight: bold;font-size: 13px;}#backlinks a {text-align: right;display: block;}/* clearfix */.clearfix {clear: both;}/* wrapper css */#wrapper {margin-top: 70px;width: 100%;}#wrapper hgroup {text-align: center;}#wrapper h2 {margin: 5px 0;color: #FF6D99;text-shadow: 1px 1px 2px #A50031;font-size: 33px;font-family: Arial Narrow, Arial, sans-serif;}#wrapper h3 {font-style: italic;font-weight: normal;font-size: 18px;text-shadow: 1px 1px 0 #fff;color: #888;margin: 5px 0;}#container {position: relative;width: 100%;margin: 0 auto 25px;padding-bottom: 10px;}.grid {width: 188px;min-height: 100px;padding: 15px;background: #fff;margin: 8px;font-size: 12px;float: left;box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);-moz-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);-webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, 0.4);-webkit-transition: top 1s ease, left 1s ease;-moz-transition: top 1s ease, left 1s ease;-o-transition: top 1s ease, left 1s ease;-ms-transition: top 1s ease, left 1s ease;}.grid strong {border-bottom: 1px solid #ccc;margin: 10px 0;display: block;padding: 0 0 5px;font-size: 17px;}.grid .meta {text-align: right;color: #777;font-style: italic;}.grid .imgholder img {max-width:100%;background: #ccc;display: block;}@media screen and (max-width : 1240px) {body {overflow: auto;}}@media screen and (max-width : 900px) {#backlinks {float: none;clear: both;}#backlinks a {display: inline-block;padding-right: 20px;}#wrapper {margin-top: 90px;}}

index.html

<!DOCTYPE html><html><head><title>BlocksIt.js Demonstration #2</title><meta name="description" content="BlocksIt.js jQuery plugin Demonstration #2 Pinterest dynamic grid with CSS3 Transitions by inWebson.com" /><meta name="keywords" content="demonstration,demo,jquery,blocksit.js,css3,dynamic,grid,layout,inwebson" /><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><link rel='stylesheet' href='style.css' media='screen' /><script src="../js/jquery.js"></script><script src="blocksit.js"></script><script>$(document).ready(function() {$(window).load(function() {$('#container').BlocksIt({numOfCol :2,//列数offsetX : 5,//x轴间距offsetY : 5//y轴间距});});});</script></head><body><!-- 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"><imgsrc="4.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"><imgsrc="2.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"><imgsrc="1.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"><imgsrc="2.jpg" /></div><strong>Winter Whisper</strong><p>Winter feel...</p><div class="meta">by Andrea Andrade</div></div><div class="grid"><div class="imgholder"><imgsrc="4.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"><imgsrc="2.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"><imgsrc="3.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"><imgsrc="4.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"><imgsrc="1.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"><imgsrc="3.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"><imgsrc="2.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"><imgsrc="4.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"><imgsrc="3.jpg" /></div><strong>Beach</strong><p>Something on beach...</p><div class="meta">by unknown</div></div><div class="grid"><div class="imgholder"><imgsrc="2.jpg" /></div><strong>Flowers</strong><p>Hello flowers...</p><div class="meta">by R A Stanley</div></div><div class="grid"><div class="imgholder"><imgsrc="1.jpg" /></div><strong>Alone</strong><p>Lonely plant...</p><div class="meta">by Zsolt Zsigmond</div></div><!----></div></section></body></html>

测试图如下：

源码下载地址：

http://download.csdn.net/detail/wow4464/8270655

0 0