给大家布置个作业用html、js写个网站

hik

@Ta 2019-05-22 9431点击

最新列表 http://adr.meizitu.net/wp-json/wp/v2/posts?page=1&per_page=20
图片详情 http://adr.meizitu.net/wp-json/wp/v2/i?id=152201
请求可用ajax，跨域问题Chrome装Allow-Control-Allow-Orgin插件解决

隐藏样式查看源码

回复列表(15|隐藏机器人聊天)

1

hik

@Ta / 2019-05-22 / 样 / 源

不用高级语言，只用js，jQuery等之类的前端语言写，有谁接受挑战么

这我感觉是个很好的前后端分离的案例，因为后端别人的，前端请求下数据处理下就行
2

o0o0o0

@Ta / 2019-05-22 / 样 / 源

你直接说多少钱就行了
3

怒放家族de霖

@Ta / 2019-05-22 / 样 / 源

访问 i.meizitu.net 的请求遭到拒绝
您未获授权，无法查看此网页。
HTTP ERROR 403

i2.meizitu.net能采图，疯狂采图去
虎友高配版(绿色)
4

Curtion

@Ta / 2019-05-22 / 样 / 源

我怀疑你在开车
5

水木易安

@Ta / 2019-05-22 / 样 / 源

一车五局
小米5黑色低配版
6

水木易安

@Ta / 2019-05-22 / 样 / 源

一车五局
小米5黑色低配版
7

hik

@Ta / 2019-05-22 / 样 / 源

@怒放家族de霖，怎么采集明明一个大月亮
8

怒放家族de霖

@Ta / 2019-05-22 / 样 / 源

@hik，迅雷批量下载，不过这网站图片内容和质量太差。。。换源吧
虎友高配版(绿色)
9

xxb

@Ta / 2019-05-23 / 样 / 源

空手套代码
CentOS 9
11

biuaxia

@Ta / 2019-05-23 / 样 / 源

@hik，嗯，我用你装的跨域插件，然后监听了一下滚动条事件，大概有个瀑布流，凑合着看吧

https://www.lanzous.com/i49toxe
密码:fmqw
12

biuaxia

@Ta / 2019-05-23 / 样 / 源

static.7z（395.78 KB）
13

biuaxia

@Ta / 2019-05-23 / 样 / 源

大概演示的效果

白嫖 - Google Chrome 2019-05-23 17-14-19.mp4（7.04 MB）
14

biuaxia

@Ta / 2019-05-23 / 样 / 源

index.html ajax请求的是我的本地服务器，代码忘了改，你要用的话把那个插件打开就行了，换一下请求地址\为http://adr.meizitu.net/wp-json/wp/v2/posts即可
15

biuaxia

@Ta / 2019-05-23 / 样 / 源

我直接贴不用服务器请求的代码
<!md>

```html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <title>白嫖</title>
</head>
<body>

<p>Hu60白嫖老哥 Hik的作业emm</p>

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 embed">
        </div>
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="layui/layui.js"></script>
<script>
    layui.use(['layer', 'form'], function () {
        var layer = layui.layer;

        var page = 1;
        var per_page = 20;
        var filling = '';

        $(function () {

            layer.msg('初始化加载ing...');
            get(page, per_page);

            $(document).scroll(function () {
                var scroH = $(document).scrollTop();  //滚动高度
                var viewH = $(window).height();  //可见高度
                var contentH = $(document).height();  //内容高度

                if (scroH > 100) {  //距离顶部大于100px时
                    // console.log('>100' + scroH);
                    // console.log('>100' + viewH);
                    // console.log('>100' + contentH);
                }
                if (contentH - (scroH + viewH) <= 100) {  //距离底部高度小于100px
                    // console.log('<= 100' + scroH);
                    // console.log('<= 100' + viewH);
                    // console.log('<= 100' + contentH);
                    layer.msg('正在加载新内容...');
                    get(page, per_page);
                }
                if (contentH = (scroH + viewH)) {  //滚动条滑到底部啦
                    // console.log('底部' + scroH);
                    // console.log('底部' + viewH);
                    // console.log('底部' + contentH);
                }

            });
        })

        function get(pageEm, per_pageEm) {
            page++;
            per_page++;
            $.ajax({
                // url: '/',
                url: 'http://adr.meizitu.net/wp-json/wp/v2/posts',
                dataType: 'json',
                data: {
                    'page': pageEm,
                    'per_page': per_pageEm
                },
                success: function (datas) {
                    console.log(datas)
                    // 准备数据填充字符串
                    var length = datas.length;
                    for (var i = 0; i < length; i++) {
                        console.log(datas);
                        var src = datas['thumb_src'];
                        var src_main = datas['thumb_src_min'];
                        var title = datas['title'];
                        filling += '            <img src="' + src_main + '" alt="' + title + '\t|\t' + src + '" class="img-thumbnail">\n';
                        // filling += '            <img src="" alt="' + title + '\t|\t' + src + '" class="img-thumbnail">\n';
                    }
                    // 找到嵌入元素填充内容
                    $('.embed').html(filling);
                },
                error: function (datas) {
                    layer.msg('请求失败，应该是没得内容了，别下拉了...');
                }
            })
        }

    });
</script>
</body>
</html>
```
16

iola1999

@Ta / 2019-05-23 / 样 / 源

似乎v2ex上看到你了。。。

添加新回复

回复需要登录。

给大家布置个作业 用html、js写个网站

给大家布置个作业用html、js写个网站