照片页做好了

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

ScreenShot_2020-11-04_18-56-43.png
ScreenShot_2020-11-04_18-56-43.png

加入了懒加载,可以自由替换加载动画。
ScreenShot_2020-11-04_12-55-42.png
ScreenShot_2020-11-04_12-55-42.png

这是之前的效果,因为当时后期修图基本不回去动图片比例,然后这边就显得有些太整齐,反而不好看。
ScreenShot_2020-11-04_19-14-48.png
ScreenShot_2020-11-04_19-14-48.png

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

关于实现瀑布流,绕来绕去简直头疼,经常是眼看就要做出最后的效果了,结果因为又因为很小的细节导致需要整体返工。
写这个页面我又学了不少新的东西,边查资料边写代码。好的代码不在长,在于巧。有时候发现几句代码就能实现刚才慢慢一屏幕代码的效果,不禁感叹。
这次除了和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');
?>

评论区

已有 2 条评论


对于已经固定的img标签怎么修改成 src="加载中动画图片地址" data-src="真实的图片地址" 是这个懒加载格式了,只能修改源代码了吗

FKUN FKUN 回复 @森木志
0 0

如果量比较大, 好像有些插件可以做到.