1.综述
最近研究了时下流行的瀑布流展示效果。 当前共计尝试的方法及其优缺点如下:
2基于jquery+jquery.wookmark.js的实现
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Wookmark Plug-in Example</title>
<meta name="description" content="An very basic example of how to use the Wookmark jQuery plug-in.">
<meta name="author" content="Christoph Ono">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- CSS Reset -->
<link rel="stylesheet" href="css/reset.css">
<!-- Styling for your grid blocks -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<header>
<h1>jQuery Wookmark Plug-in Example</h1>
<p>Resize the browser window or click a grid item to trigger layout updates.</p>
</header>
<div id="main" role="main">
<ul id="tiles">
<!-- These are our grid blocks -->
<li><img src="images/image_1.jpg" width="200" height="283"><p>1</p></li>
<li><img src="images/image_2.jpg" width="200" height="300"><p>2</p></li>
<li><img src="images/image_3.jpg" width="200" height="252"><p>3</p></li>
<li><img src="images/image_4.jpg" width="200" height="158"><p>4</p></li>
<li><img src="images/image_5.jpg" width="200" height="300"><p>5</p></li>
<li><img src="images/image_6.jpg" width="200" height="297"><p>6</p></li>
<li><img src="images/image_7.jpg" width="200" height="200"><p>7</p></li>
<li><img src="images/image_8.jpg" width="200" height="200"><p>8</p></li>
<li><img src="images/image_9.jpg" width="200" height="398"><p>9</p></li>
<li><img src="images/image_10.jpg" width="200" height="267"><p>10</p></li>
<li><img src="images/image_1.jpg" width="200" height="283"><p>11</p></li>
<li><img src="images/image_2.jpg" width="200" height="300"><p>12</p></li>
<li><img src="images/image_3.jpg" width="200" height="252"><p>13</p></li>
<li><img src="images/image_4.jpg" width="200" height="158"><p>14</p></li>
<li><img src="images/image_5.jpg" width="200" height="300"><p>15</p></li>
<li><img src="images/image_6.jpg" width="200" height="297"><p>16</p></li>
<li><img src="images/image_7.jpg" width="200" height="200"><p>17</p></li>
<li><img src="images/image_8.jpg" width="200" height="200"><p>18</p></li>
<li><img src="images/image_9.jpg" width="200" height="398"><p>19</p></li>
<li><img src="images/image_10.jpg" width="200" height="267"><p>20</p></li>
<li><img src="images/image_1.jpg" width="200" height="283"><p>21</p></li>
<li><img src="images/image_2.jpg" width="200" height="300"><p>22</p></li>
<li><img src="images/image_3.jpg" width="200" height="252"><p>23</p></li>
<li><img src="images/image_4.jpg" width="200" height="158"><p>24</p></li>
<li><img src="images/image_5.jpg" width="200" height="300"><p>25</p></li>
<li><img src="images/image_6.jpg" width="200" height="297"><p>26</p></li>
<li><img src="images/image_7.jpg" width="200" height="200"><p>27</p></li>
<li><img src="images/image_8.jpg" width="200" height="200"><p>28</p></li>
<li><img src="images/image_9.jpg" width="200" height="398"><p>29</p></li>
<li><img src="images/image_10.jpg" width="200" height="267"><p>30</p></li>
<!-- End of grid blocks -->
</ul>
</div>
<footer>
</footer>
</div>
<!-- include jQuery -->
<script src="js/jquery-1.7.1.min.js"></script>
<!-- Include the plug-in -->
<script src="js/jquery.wookmark.js"></script>
<!-- Once the page is loaded, initalize the plug-in. -->
<script type="text/javascript">
$(document).ready(new function() {
// Prepare layout options.
var options = {
autoResize: true, // This will auto-update the layout when the browser window is resized.
container: $('#main'), // Optional, used for some extra CSS styling
offset: 2, // Optional, the distance between grid items
itemWidth: 210 // Optional, the width of a grid item
};
// Get a reference to your grid items.
var handler = $('#tiles li');
// Call the layout function.
handler.wookmark(options);
// Capture clicks on grid items.
handler.click(function(){
// Randomize the height of the clicked item.
var newHeight = $('img', this).height() + Math.round(Math.random()*300+30);
$(this).css('height', newHeight+'px');
// Update the layout.
handler.wookmark();
});
});
</script>
</body>
</html>
相关推荐
基于jquery.print.js插件的js打印demo,简单易用,使用详细教程请查看我的个人主页的博客《一款很好用的Jquery 打印插件——jQuery.print.js》
该Demo源码是博文《基于jQuery.i18n.properties 实现前端页面的资源国际化》里面的源码Demo。博文地址:http://blog.csdn.net/aixiaoyang168/article/details/49336709。 可供下载学习使用。
利用jquery技术和url传参,实现tomcat网页和Webstorm网页之间实现跨域数据传输
个人把常用的一些jquery插件做了一个demo,里面有jquery.dropkick-1.0.0.js、slider.js、fullcalendar-1.5.2、jquery.grumble.js、jcarousellite_1.0.1.js(已修改)、jquery.jqzoom.js、jquery.thickbox.js、jquery...
基于jQuery.i18n.properties 实现前端页面的资源国际化Demo 源码
基于jQuery.i18n.properties插件实现前端页面国际化demo,demo在apache中测试
基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于html+css+js进行网页设计 课程设计 毕业设计 供参考 源码+说明 基于...
折腾了一天,亲自调试完成亲测jquery+ajaxfileupload+demo
jquery.marquee.js demo及源文件
该Demo源码是博文《基于jQuery.i18n.properties 实现前端页面的资源国际化》里面的源码Demo。博文地址:http://blog.csdn.net/aixiaoyang168/article/details/49336709。 可供下载学习使用。
ztree demo jquery.ztree,jquery.ztree.core.js,jquery.ztree.core-3.5.min.js,jquery.ztree.excheck-3.5.min.js,jquery.ztree.all.min.js,jquery.ztree.exedit.js,jquery.ztree.exhide.min.js,jquery-1.4.4.min...
jquery.lazyload.js 图片懒加载 --demo
简单的jquery进度条插件LineProgressbar.js及demo,一个非常轻量级的插件,样式漂亮
d3+jQuery横向树图demo.zip
轮播图、标签切换,教程地址:http://www.superslide2.com/demo.html
使用jquery 的jquery.qrcode.js,在html中写的一个小demo
jqweui图片上传插件jquery-weui.uploader.js 实现 多图上传,预览,删除,初始化控件,图片赋值加载,获取图片数据。压缩包包含jquery-weui.uploader.js,weui以及示例demo
3.jquery+css实现简洁两级横向导航菜单,带动态效果 4.jQuery+CSS实现竖形动感导航菜单效果 5.jquery+div漂亮SmartMenu下拉菜单气泡透明效果 6.jQuery+div实现flash炫彩菜单插件下载 7.jquery+div实用漂亮...
以上所述是小编给大家介绍的利用HTML5+css3+jquery+weui实现仿微信聊天界面功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持!
jquery+ligerUI+文档+demo,里面有文档,中文的,还有许多demo jquery+ligerUI+文档+demo,里面有文档,中文的,还有许多demo jquery+ligerUI+文档+demo,里面有文档,中文的,还有许多demo jquery+ligerUI+文档+...