Append the next page content to the bottom seamlessly (like a waterfall, Unlimited scrolling, no need to manually click on the next page)~
网站给我看看,这种都是网页加载完成后网站自己去动态调整的(即瀑布流样式,宽度一致 高度不一致),需要针对性写个 CSS 样式规则,来强行使其位置整齐。
我一般是选择将这些子元素从绝对位置 position: absolute;
改回相对位置 position: static !important;
,
然后让其向左对齐 float: left !important;
,
并设置固定高度 height: XXXpx !important;
,
同时还要对它们的父元素设置自适应高度 height: auto !important;
。
具体你可以去我那个 外置翻页规则列表 中看看我是怎么写的,你搜一下 float: left !important;
就能找到好几个现成实例。
这样做的话,优点是简单统一,缺点就是如果这些子元素如果高度相差太大的话,那么设置的固定高度就会导致参差不齐,甚至重叠在一起,观感肯定是不如网站原生显示效果的,但是如果设置为一个比较合理的固定高度的话,还是能缓解该情况的。
毕竟如果脚本要自己去实现和网站原生一样瀑布流效果,那就麻烦的多了。。。而且不同网站的瀑布流样式还存在差异,兼容起来比较蛋疼。
"sexnori": {
"host": "www.sexnori19.me",
"url": "return (fun.lp() != '/')",
"pager": {
"nextL": "a.next",
"pageE": ".gallery-item",
"replaceE": ".eb-pagination"
}
}
"style": ".gallery-item {position: static !important;float: left !important;top: auto !important;left: auto !important;}",
搞定了
加个这个规则即可,具体高度多少你可以自己看着改,我是设置了一个比较合适的 308px:
"style": ".board-gallery {height: auto !important;} .gallery-item {position: static !important; float: left !important; height: 308px !important;}",
试了下,你这个也行,这网站的这些子元素高度本身都一样,因此倒也无需去设置高度了。
不过对于那些子元素高度不一的情况下,就必须要设置高度,否则会导致参差不齐非常严重(参考 JavDB、JavBus 这些)。
div class="gallery-item" style="position: absolute; left: 0%; top: 0px;"
div class="gallery-item" style="position: absolute; left: 5%; top: 0px;"
div class="gallery-item" style="position: absolute; left: 10%; top: 0px;"
请问下 这种 pageE 怎么处理
"pageE": ".gallery-item",
这样写的话 他就变成下边这样了 位置就不对了
div class="gallery-item"