使用瀑布流的一些疑问~

[threezhang]

使用waterfall时碰到一些疑问，各位大牛有空的话希望能帮忙解答一下^_^

从数据库读数据转换成json显示到页面，我做了以下几个改动

1,DEBUG_DATA = ['{"data":{"blogs":${json}....
将blogs后面的数据换为json

2,将masnunit.js中的TEMPLATES进行了改动,以符合我的json数据格式

3,将页面中多余的form这些删掉

现在碰到的问题是
1,页面往下拉的时候,数据不能加载出来,加载之后就显示分页的div了,下一页的内容显示不出来
2,往下滚动的时候 去调用的哪个方法将数据填充到下面的呢

如果从数据动态读数据 有示例吗？

麻烦了~

[balibell]

首先，你要去掉DEBUG 和 DEBUG_DATA 才能动态化。
然后，要理解，subpage 子页和 upperpage 大页的区别，示例中一大页拖到底会有4次子页请求，如果你打开浏览器的Network XHR 查看器，可以清楚的看到这些子页请求：
specialcol.html?page=1
specialcol.html?page=2
...

要动态化一个瀑布流，只需要提供一组子页请求，即你需要生成这样一些地址：
xxx?page=1&yyy
xxx?page=2&yyy
...

每个请求response 数据参考 DEBUG_DATA[i] (注意：DEBUG_DATA本身是数组是为了随机获取它的第i个元素替换response data，而不是说response data 是个数组) 数据格式：

{"data":{"blogs":[${unit},...,${unit}],"has_next":true},"success":true}

这里说说你的第一个改动点，blogs 必须是数组，是由单元数据组成的数组。至于一个子页返回多少个单元，必须和配置参数里的unitsnum 保持一致，否则会出现页码数计算错误。返回数据 data.has_next 必须有，依赖它判断是否还有下一子页；data.totalcount 可以有(参考示例) ，用于更新当前的总单元数从而更新总页码数；success 表示请求数据成功，如果为 false 则会进入请求出错流程页面上会提示“网络繁忙，点此重试~”。

写到这里，得反思下，说明做的不够好，很多问题没有交代清楚，难为各位使用者。

好，到这里，你已经生成了一组请求地址：
xxx?page=1&yyy=v
xxx?page=2&yyy=v
...

怎么配置到瀑布流里面去呢？
注意每个页面可以置入多个瀑布流，由参数 "arrform" : ['album','favalbum','collect','original'] 指定。
第一个瀑布流唯一标识 album，在页面底部放置一个 form 表单与之对应

form 表单的action 和其内部的 hidden input 将被拼装成子页码请求地址： xxx?page={n}&yyy=v (注意这里的page数 n 是在js 里拼装进去的。)

说说你的第二个改动点，TEMPLATES 是用来拼装单元块的，单元块内部的数据结构变化完全不影响Woo 的运行，当然你的response data 需要满足上面提到的结构框架，以便在 masnunit.js 中对它进行解析：
{"data":{"blogs":[${unit},...,${unit}],"has_next":true},"success":true}

说说你的第三个改动点， “将页面中多余的form这些删掉” 我给出的示例一个页面置入了4个瀑布流，当你不需要这么多个的时候，比如说你只想配置一个瀑布流，那么将参数改为 "arrform" : ['album'] 就行了，我们知道 "arrform" 里的每个值对应一个form 表单，多余的可以自行删掉，不删让它们冗余在那也行。

先这样吧，再有问题再说。

[threezhang]

谢谢LS的帮助，看了解答终于摸着一点头绪了 感谢!!!

现在页面打开XHR也都是正确的链接了，会去后台调用方法了，数据也是按每个小页面查出来是正确的。
现在碰到的问题是显示到前台有点问题

1,每次链接进入后台查出来数据是正确的，经过woo.js的$.ajax 方法 success时 h 是个document，再进入c.analyzeResponse(h);的时候masnunit.js中var jsn = $.isPlainObject(h) ? h : $.parseJSON(h) 得到的jsn为null；

查看例子中的使用DEBUG_DATA的时候 得到的jsn是有值的

---

后台我该返回什么数据呢？
我试过 以下几个方案
1,
String str = "['{"data":{"blogs":'" +json+ "',"hasrp":true,"has_next":true,"pgsource":"_","nopth":false},"success":true}']";
其中
Gson gson = new Gson();
json = gson.toJson(result);

结果var jsn = $.isPlainObject(h) ? h : $.parseJSON(h) 得到的jsn为null

2,直接renturn json; 那就报错了

前端几乎很少用，所以问的问题都比较菜 ^_^
如果有空的话 还是希望大牛能够解答一下

[balibell]

c.analyzeResponse 实际上就是 masnunit.js 里的 ANALYZERESPONSE [i] 方法

这个方法会传递一个参数 h ， 麻烦监控下h， 把 h 值记录下来发给我。

h 会被下面这行代码解析成 json

var jsn = $.isPlainObject(h) ? h : $.parseJSON(h)

163

发件人： Three
发送时间： 2013-10-25 17:01
收件人： duitang/waterfall
抄送： Chen Bo
主题： Re: [waterfall] 使用瀑布流的一些疑问~ (#6)
谢谢LS的帮助，看了解答终于摸着一点头绪了 感谢!!!
现在页面打开XHR也都是正确的链接了，会去后台调用方法了，数据也是按每个小页面查出来是正确的。
现在碰到的问题是显示到前台有点问题
1,每次链接进入后台查出来数据是正确的，经过woo.js的$.ajax 方法 success时 h 是个document，再进入c.analyzeResponse(h);的时候masnunit.js中var jsn = $.isPlainObject(h) ? h : $.parseJSON(h) 得到的jsn为null；
查看例子中的使用DEBUG_DATA的时候 得到的jsn是有值的

后台我该返回什么数据呢？
我试过 以下几个方案
1,
String str = "['{"data":{"blogs":'" +json+ "',"hasrp":true,"has_next":true,"pgsource":"","nopth":false},"success":true}']";
其中
Gson gson = new Gson();
json = gson.toJson(result);
结果var jsn = $.isPlainObject(h) ? h : $.parseJSON(h) 得到的jsn为null
2,直接renturn json; 那就报错了
前端几乎很少用，所以问的问题都比较菜 ^^
如果有空的话 还是希望大牛能够解答一下
—
Reply to this email directly or view it on GitHub.

[threezhang]

var jsn = $.isPlainObject(h) ? h : $.parseJSON(h) ;

现在碰到问题就是这里 解析h 为null了呀

不清楚你们使用的时候调用后台方法 返回h到底是什么呢

[balibell]

每个请求response data 数据格式：

{"data":{"blogs":[${unit},...,${unit}],"has_next":true},"success":true}

在演示demo 里给出的模拟返回数据也就是 DEBUG_DATA[0]

{"data":{"blogs":[{"is_robot":false,"photo_id":10596568,"unm":"一抹红嫣","uid":1693226,"cmts":[],"good":false,"common":false,"album_wait_audit":false,"price":0,"rid":95800538,"buylnk":"","sender_wait_audit":false,"zanc":0,"sta":0,"ava":"http://cdn.duitang.com/img/0/dfhead24x24.png ","coupon_price":0,"albnm":"花花女子与花花世界","iht":172,"albid":5542595,"favc":99,"wait_audit":false,"ruid":802123,"id":97290923,"repc":0,"isrc":"http://cdn.duitang.com/uploads/blog/201309/14/20130914190628_rFT3G.thumb.200_0.jpeg ","msg":"【辣味椒盐虾】1、 洋葱切丝、葱切小段；2、 锅中放油，稍稍多一些，虾入油锅炸；3、 一直大火炸，炸至虾壳跟虾肉分离,捞起沥油；4、 锅中放一部分炸虾的油，放干辣椒爆香略炒；5、 放洋葱，小火炒香,放入炸好的虾，转大火，稍稍翻炒,放入椒盐，炒匀；6、 撒葱花，出锅。"},...],"hasrp":true,"has_next":true,"pgsource":"tp_","nopth":false},"success":true}

[threezhang]

@balibell 谢谢上次的回复!! 数据从后台到前台已经正常了.

是不是 woo.js里面的 $.ajax中 应该加个参数 dataType: "json"呢,
我前面提到的 后台数据组装好之后传到页面上是有问题的
在我加了dataType:"json" 之后,通过调试js,显示回调的数据就正常了.

好像woo.js中默认是String类型的??

---

现在又碰到了一个问题
我把woo.js中"unitsnum" 设置了为2,"subpagenum" 设置了为10, 预想的结果应该是第一次加载两个数据,当我鼠标往下滚的时候,再加载两个,再往下滚,继续加载,当加载10次了,就显示分页的div.

但是: 我每次加载页面的时候,鼠标还没拖动,就自动加载了10次,然后数据一次加载两个这样跑完了10次,就直接显示分页的div了.

是不是还要改哪里呢？

[balibell]

dataType 默认值 "text" ，之前确实没有这个参数设置，后面版本会加上。如果设置 dataType="json" 返回的数据格式必须严格符合json格式，否则会报错。

后面又碰到的问题，相关参数如下：

// * 每页的单元数
"unitsnum" : 24,

// * 每一大页子页数量
"subpagenum" : 4,

// 每次append插入dom的单元个数
"appendnum" : 12,

// 距离底部多远提前开始加载
"lbias" : 400,

一次加载单元个数是由 appendnum 参数控制的。你所描述的自动加载10次的情况我没办法重现。只能建议你检查ANALYZERESPONSE 方法返回值。这里留下我的qq 号码 54180405，更方便沟通。

[threezhang]

O(∩_∩)O~ 2年过去了~

[balibell]

qq号一直有效： 54180405

Original Message
Sender:Threenotifications@github.com
Recipient:duitang/waterfallwaterfall@noreply.github.com
Cc:Chen Bobalibell@163.com
Date:Thursday, Jan 7, 2016 00:42
Subject:Re: [waterfall] 使用瀑布流的一些疑问~ (#6)

O(∩_∩)O~ 2年过去了~
—
Reply to this email directly or view it on GitHub.

[Zephery]

请问一下，后台穿图片的时候，图片高度必须设置？

[balibell]

是的，必须知道预先知道图片高度 Original Message Sender:Zepherynotifications@github.com Recipient:duitang/waterfallwaterfall@noreply.github.com Cc:Chen Bobalibell@163.com; Mentionmention@noreply.github.com Date:Saturday, Jul 22, 2017 18:33 Subject:Re: [duitang/waterfall] 使用瀑布流的一些疑问~ (#6) 请问一下，后台穿图片的时候，图片高度必须设置？ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[Zephery]

您好，加你qq没反应啊~~~~

[balibell]

告诉我你的qq号码，我加你 Original Message Sender:Zepherynotifications@github.com Recipient:duitang/waterfallwaterfall@noreply.github.com Cc:Chen Bobalibell@163.com; Mentionmention@noreply.github.com Date:Sunday, Jul 23, 2017 11:03 Subject:Re: [duitang/waterfall] 使用瀑布流的一些疑问~ (#6) 您好，加你qq没反应啊~~~~ — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[liang3391]

@balibell 用了 这个效果,但是我想让查看网页源代码的时候也能看到数据 这种怎么处理呢?QQ 二四5864009 请指点下,加您QQ 一直加不上

[liang3391]

@threezhang 能加你QQ交流下吗