|
| 1 | +## 瀑布流DEMO |
| 2 | + |
| 3 | +` |
| 4 | +注: 为方便快捷了解demo请参考index.html data.php等具体演示文件 |
| 5 | +` |
| 6 | + |
| 7 | +来源:网络搜索 |
| 8 | +**### Demo文件组成** |
| 9 | +>**1.文件夹:** |
| 10 | +>> (1).image : 存放示例图片 |
| 11 | +>> (2).js : 存放jQuery以及瀑布流js文件 |
| 12 | +
|
| 13 | +>**2.文件:** |
| 14 | +>> (1).data.php : Ajax请求文件 |
| 15 | +>> (2).index.html: demo演示页面 |
| 16 | +
|
| 17 | + |
| 18 | + |
| 19 | +**加载jQuery** |
| 20 | +``` |
| 21 | +<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> |
| 22 | +``` |
| 23 | + |
| 24 | +**加载瀑布流js文件** |
| 25 | + |
| 26 | +``` |
| 27 | +<script type="text/javascript" src="js/jquery.windswaterflow.js"></script> |
| 28 | +``` |
| 29 | + |
| 30 | +**在页面中设置相关参数(index.html)** |
| 31 | + |
| 32 | +``` |
| 33 | +<script type="text/javascript"> |
| 34 | +$(document).ready(function() { |
| 35 | +$(".container").windswaterflow({ |
| 36 | + //图片div选择器 <div class="pin"> |
| 37 | + itemSelector: '.pin', |
| 38 | + //显示'加载中' 选择器 <div id="loading">正在加载中……</div> |
| 39 | + loadSelector: '#loading', |
| 40 | + //无图片加载(图片末尾) 选择器 <div id="noshow">亲，已经没有了！</div> |
| 41 | + noSelector: '#noshow', |
| 42 | + //图片模板 |
| 43 | + boxTemplate: '<div class="pin hide"><a href="{href}"><div class="img"><img src="{img}" alt="" /></div></a><div class="title">{title}</div><div class="like btn">喜欢</div><div class="comments btn">评论</div></div>', |
| 44 | + //图片div宽度 |
| 45 | + columnWidth: 210, |
| 46 | + //图片x轴间距 |
| 47 | + marginWidth: 14, |
| 48 | + //图片y轴间距 |
| 49 | + marginHeight: 16, |
| 50 | + //ajax页面路径 |
| 51 | + ajaxServer: './data.php', |
| 52 | + //图片数量参数 指定url所带参数 num值 对应 scrollBoxNumber:10 例 如:www.demo.com? num = 10 & page = 1 |
| 53 | + boxParam: 'num', |
| 54 | + //分页参数 指定url所带参数 page值对应 maxPage:0 例如:www.demo.com? num = 10 & page = 1 |
| 55 | + pageParam: 'page', |
| 56 | + //设置最大加载页数 0:不限制 |
| 57 | + maxPage:0, |
| 58 | + //是否显示html页面默认图片 true :显示加载图片 false :显示页面默认图片 |
| 59 | + init: true, |
| 60 | + //默认加载图片数量 |
| 61 | + initBoxNumber: 20, |
| 62 | + //是否开启瀑布流 |
| 63 | + scroll: true, |
| 64 | + //每次加载的图片数量 |
| 65 | + scrollBoxNumber: 10, |
| 66 | + callback: function() { |
| 67 | + $(".pin").mouseover(function() { |
| 68 | + $(this).find(".btn").show(); |
| 69 | + }).mouseout(function() { |
| 70 | + $(this).find('.btn').hide(); |
| 71 | + }); |
| 72 | + } |
| 73 | + }); |
| 74 | +}); |
| 75 | +</script> |
| 76 | +``` |
| 77 | + |
| 78 | +**5.Data.php(用于向前台提供图片信息)** |
| 79 | + |
| 80 | +可以通过: |
| 81 | + |
| 82 | +``` |
| 83 | +// 接收 图片数量 与index.html 中boxParam: 'num',对应 |
| 84 | +$ num = $_GET["num"]; |
| 85 | +// 接收最大页数参数 与index.html 中maxPage:0,对应 |
| 86 | +$ page = $_GET["page"]; |
| 87 | +$ data = array(); |
| 88 | +// demo演示效果 预设最大页数为10页$page<11 |
| 89 | +
|
| 90 | + $ data[$i]["img"] = "images/P".$pNum.".jpg"; |
| 91 | + $ data[$i]["title"] = "时间：".date("Y-m-d H:i:s")."<br />".( $i+1 )."、WindsWaterFlow(第".$page."页)"; |
| 92 | + $ data[$i]["href"] = "http://www.baidu.com"; |
| 93 | +
|
| 94 | + |
| 95 | +``` |
| 96 | + |
| 97 | +`设置将要向index.html传递的信息` |
0 commit comments