照片页做好了

请注意，本文编写于 1478 天前，最后修改于 1478 天前，其中某些信息可能已经过气。

加入了懒加载，可以自由替换加载动画。

这是之前的效果，因为当时后期修图基本不回去动图片比例，然后这边就显得有些太整齐，反而不好看。

现在用非常暴力的方法随机输出图片高度，强行制作出参差不齐的效果。后面有附代码，感兴趣的可以去看看。
本来还搞得非常精致，把图片的宽高信息弄下来，再前后比较比较。但没想到啊，这个图片信息获取直接搞得网站加载巨慢。没啥其他办法，遇事不决量子力学，直接安排随机数。有一定概率输出很细长的图片，有一定概率输出接近方形的，剩下的就是原始比例。

关于实现瀑布流，绕来绕去简直头疼，经常是眼看就要做出最后的效果了，结果因为又因为很小的细节导致需要整体返工。
写这个页面我又学了不少新的东西，边查资料边写代码。好的代码不在长，在于巧。有时候发现几句代码就能实现刚才慢慢一屏幕代码的效果，不禁感叹。
这次除了和vue框架有关的没有去尝试（看到了很多用vue写的），其他的css，js的实际中实现办法都试了一边。大概和Typecho也有关系，我放在独立的测试页面跑非常正常，放进Typecho就可能会抽风。Typecho模板的那些代码我也不太熟悉，看来看去也没看出问题。
最后瞎搞总之是搞出来了。代码顺便放上来了，如果要给自己的博客添加效果可以在根目录添加photo.php文件把代码放进去。图片源当然还是要自己手动去设置一下。

<?php

/** 
 * Photos
 *
 * @package custom
 *  
 * @author FKUN
 */
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
$setting = $GLOBALS['VOIDSetting'];
if (!Utils::isPjax()) {
    $this->need('includes/head.php');
    $this->need('includes/header.php');
}
?>

<head>
    <meta charset="UTF-8">
    <script src="https://api.fkun.tech/jscss/jquery-3.5.1.min.js"></script>
    <script src="https://api.fkun.tech/jscss/fancybox/jquery.fancybox.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://api.fkun.tech/jscss/fancybox/jquery.fancybox.min.css">
    <script src="https://api.fkun.tech/jscss/lazyload.min.js"></script>
    <script src="https://api.fkun.tech/jscss/waterfall-light.js"></script>
    <style type="text/css">
        body {
            margin-top: 4%;
            padding: 0;
        }

        .box {
            float: left;
        }

        .box img {

            box-shadow: 1px 1px 10px #000;
            border-radius: 15px;
            justify-content: center;
            align-items: center;
        }

        #photos {
            width: 100%;
            object-fit: cover;
        }

        @media screen and (max-width:719px) {
            body {
                margin-top: 7%;
                padding: 0;

            }
        }
    </style>

</head>


<body>
    <div id="picrow">
        <!-- 这段是图片源的代码，需要自己重新设置。 -->
        <?php
        $raw = file_get_contents('https://api.fkun.tech/img/num.php');
        $imgnum = (int)$raw;
        for ($num = 1; $num < $imgnum; $num++) {
            $imgscr = "https://api.fkun.tech/api/web-" . $num . ".jpg";
            echo '<a class="box" data-fancybox="fkunfotos" href="' . $imgscr . '">';
            $randnum = rand(0, 2);
            if ($randnum == 1) {
                $url = '<img class="lazy item" id="photos" data-original="' . $imgscr . '" src="https://api.fkun.tech/gif/load.gif"  height="300vw"/>';
            } elseif ($randnum == 2) {
                $url = '<img class="lazy item" id="photos" data-original="' . $imgscr . '" src="https://api.fkun.tech/gif/load.gif"  height="600vw"/>';
            } else {
                $url = '<img class="lazy item" id="photos" data-original="' . $imgscr . '" src="https://api.fkun.tech/gif/load.gif"  height="auto"/>';
            }
            echo $url;
            echo '</a>';
        }
        ?>
    </div>
</body>
<script type="text/javascript" charset="utf-8">
    $(function() {
        $("img.lazy").lazyload({
            placeholder: "https://api.fkun.tech/gif/load.gif",
            effect: "fadeIn",
            threshold: 200,
            failurelimit: 10
        });
    });
</script>
<script>
    var setting = {
        gap: 5,
        gridWidth: [0, 0, 600, 800],
    };
    $(function() {
        $('#picrow').waterfall(setting);
    })
</script>
<script type="text/javascript">
    $().fancybox({
        keyboard: true,
        arrows: true,
        toolbar: "auto",
        buttons: [
            "zoom",
            "slideShow",
            "fullScreen",
            "download",
            "close"
        ],
    });
</script>
<?php
$this->need('includes/footer.php');
?>

网站博客文件 css 模板代码屏幕图片细节 typecho

照片页做好了

评论区

已有 2 条评论

照片页做好了

照片页做好了

重写了照片页

海外音乐版权解锁的一些思路

评论区

已有 2 条评论