show.html

<!DOCTYPE html>
<html>
    <head>
        <title>Pixiv 随机图片</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="dns-prefetch" href="https://cdn.jsdelivr.net/" />
        <link rel="preload" href="https://cdn.jsdelivr.net/gh/kylelogue/mustard-ui/dist/css/mustard-ui.min.css" as="style" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kylelogue/mustard-ui/dist/css/mustard-ui.min.css" />
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
        <script>
            $(document).ready(function () {
                $('.scroll-down, .get-started').on('click', function (e) {
                    e.preventDefault();
                    $('html, body').animate(
                        {
                            scrollTop: $('section:first-of-type').offset().top,
                        },
                        300,
                    );
                });
            });
        </script>
        <style>
            header {
                background: #a0e5e4;
            }

            .get-started {
                background: #43ccc8;
                border: 3px solid #50d0cc;
            }

            * {
                word-break: break-all;
            }

            .panel img {
                width: 100%;
            }

            .right {
                float: right;
            }
        </style>
    </head>

    <body>
        <section>
            <div class="row" id="output">
                <strong>Error!</strong>
                &nbsp;&nbsp;
                <i>No images can be shown.</i>
            </div>
        </section>
        <script>
            $.get('https://cdn.jsdelivr.net/gh/codingbox/Bye-Broken-Link@latest/url_ok.txt', function (data) {
                let html = '';
                document.getElementById('output').innerHTML = '';
                data.split(/\r\n|\r|\n/)
                    .filter(e => e.length > 2)
                    .forEach((item, index) => {
                        html += `
        <div class="col col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="panel">
          <div class="panel-head">
            <p class="panel-title">ID:${index}</p>
          </div>
          <img class="lozad" data-src="${item}" alt="${index}" />
          <div class="panel-footer">
            <button onclick="window.open('${item}')" class="button-primary right">查看图片</button>
          </div>
        </div>
      </div>`;
                    });
                document.getElementById('output').innerHTML = html;
                const observer = lozad();
                observer.observe();
            });
        </script>
        <!--</body>-->
    </body>
</html>