一. 基础使用设置
注意：在网页的头部引用jQuery和abShaper两个必需的js既将jquery和abShaper包含在head标中或位于关闭正文标记之前。请确保在abShaper之前包含jquery前后顺序不能乱。
1. <!doctype html>
2. <html>
3. <head>
4. <meta charset="utf-8">
5. <title>domo-abShaper演示例子</title>
6. <script type="text/javascript" src="js/jquery.min.js"></script> <!-- 必须存在1 -->
7. <script type="text/javascript" src="js/jquery.abShaper.min.js"></script> <!-- 必须存在2 -->
8. </head>
9. <body>
二. 编写html代码
注意：创建一个div的父层，如此例子abShaper-body。使用css控制其样式。jQuery和abShaper将选定父层元素内的层标签与样式应用于它们，并按照您的喜好定位。
1. <div class="abShaper-body"> <!-- 此为父层，添加调用时需要用到此处的class名 -->
2. </div>
三. 编写例子css样式
注意：编写 html 和 css 样式时一定要注意，父层元素和容器层元素，都必须具有指定的宽度和高度，jquery.abShaper.min.js 才能正常的工作。
1. <style type="text/css">
2. * { margin:0; padding:0; }
3. body { background:#fff; font-size:12px; }
4. ul,li { list-style:none; }
5. p { word-wrap:break-word; }
6. img { border:0; vertical-align:middle; }
7. a { color:#333; text-decoration:none; }
8. a:hover { color:#1974A1; text-decoration:none; }
9. /* abShaper-body为父层，添加调用时需要用到此处的class名 */
10. </style>
四. 调用参数的设置
注意：在要使用效果的div父层abShaper-box外，放置调用代码即可实现效果。建议把每个页面的调用，统一放在页尾</body> </html>标签关闭之前，方便维护与管理。注意调用代码必须放在引用jquery和abShaper之后的位置才能正常使用
1. <script type="text/javascript">
2. $("#abShaper-demo").abShaper({
3. isMousewheel: true,
4. isAutoSize: true,
5. mainEl: ".listCont",
6. imgEl: "dt img",
7. loadBtn: ".load-more",
8. loadState: ".load-text",
9. loadSrc: "_src",
10. page: 1,
11. pageTotal: 1000,
12. setSize: function(winWidth) {
13. var col = 1;
14. if(winWidth <= 360) {
15. conWidth = $(window).width();
16. col = 1;
17. } else if(winWidth <= 560) {
18. conWidth = $(window).width();
19. col = 2;
20. } else if(winWidth <= 768) {
21. conWidth = $(window).width();
22. col = 3;
23. } else if(winWidth <= 1060) {
24. conWidth = $(window).width();
25. col = 4;
26. } else {
27. conWidth = 1200;
28. col = 5;
29. }
30. return {"width": conWidth, "colunm": col};
31. },
32. fetch: function (obj) {
33. // TODO Api接口请求数据实例代码...
34. $.ajax({
35. url: "data.php",
36. data: {page: 1, pageSize: 100},
37. dataType: "json",
38. error: function () {
39. // 解锁加载状态
40. obj.unlock();
41. // 加载异常提示
42. $(".abShaper-view .load-text").html("Request data exception!");
43. },
44. success: function(response) {
45. // result
46. var content = "";
47. for (var k in response.result) {
48. content += '<dl>';
49. content += ('<dt><a href="#"><img _src="{{filename}}" /></a></dt>')
50. .replace('{{filename}}', response.result[k].filename);
51. content += ('<dd class="tit"><a href="#"><span></span>瀑布流自适应布局</a></dd>');
52. content += '</dl>';
53. }
54. // 追加数据
55. obj.append(content);
56. }
57. });
58. });
59. </script>
60. </body>
61. </html>
参数文档
abShaper是一款基于jquery运行的瀑布流自适应布局插件。布局优美使用简单，熟练掌握后只需要简单的变换一定参数即可调用使用。兼容IE6+ Safari Opera Firefox Chrome等大部分浏览器。
| 参数 | 默认值 | 具体说明 |
| mainEl | null | 内容元素 |
| imgEl | null | (数据列表)每小块图片元素 |
| loadSrc | _src | 图片加载原图属性 |
| loadBtn | null | 点击加载更多(按钮元素,表示数据的下一页) |
| loadState | null | 正在加载状态(提示元素) |
| isMousewheel | false | 鼠标轮滚是否自动加载更多(表示数据的下一页)。“true”为开启，“false”为关闭 |
| isAutoSize | false | 是否开启自适应(每排显示个数)。“true”为开启，“false”为关闭 |
| xy | [20,20] | 数组形式，(数据列表)每块之间(水平|垂直)间距 |
| setSize | null | 自定义函数[function(w){}，w为当前浏览器窗口可视区域宽]，返回({"width":宽, "colunm": 个数})容器宽和允许每排个数 |
| page | 1 | 初始化数据当前分页页码 |
| pageTotal | 1 | 数据分页的总页码数。 |
abShaper基于jquery运行的瀑布流插件
Copyright © 2010-2023 www.geshai.com, Geshai Team, All Rights Reserved.
QQ交流群(一)158544200(二)790370978可反馈问题