js实现瀑布流布局-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45791806/article/details/132333488

jquery.masonry.min.js：https://download.youkuaiyun.com/download/weixin_45791806/88224671
jQeasing.js：
https://download.youkuaiyun.com/download/weixin_45791806/88224673
jquery.lazyload.js这个js可以自己百度下载
直通车：https://download.youkuaiyun.com/download/weixin_45791806/88224674

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title></title>
    <link rel="stylesheet" href="style/index.css">
    <script src="js/jquery-1.8.3.min.js"></script>
</head>

<body>
    <div class="content">
        <!-- 瀑布流样式开始 -->
        <div class="waterfull clearfloat" id="waterfull">
            <ul class="index-ul">
                <li class="item">
                    <a href="#" class="a-img" title="手把手教你用css3来创建loading动画(二)">
                        <img data-original="http://wlog.cn/demo/waterfall/images/003.jpg" src="" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://" title="手把手教你用css3来创建loading动画(二)">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img data-original="http://wlog.cn/demo/waterfall/images/011.jpg" src="" alt="">
                    </a>
                    <h2 class="li-title" title="手把手教你用css3来创建loading动画(二)">
                        <a href="http://">
                            手把手教你用css3来创建loading动画(二)
                        </a>
                    </h2>
                    <div class="author-wrapper">
                        <a href="/user/profile/5b29613911be1079ad489215" class="author" target="_blank">
                            <img class="author-avatar"
                                src="https://sns-avatar-qc.xhscdn.com/avatar/64c3ab62c769459f3a5e03de.jpg?imageView2/2/w/60/format/webp|imageMogr2/strip">
                            <span class="name">
                                羅西口愛
                            </span>
                        </a>
                        <span class="like-wrapper">
                            <span class="like-lottie" style="width: 16px; height: 16px;"></span>
                            <span class="count">1w+</span>
                        </span>
                    </div>
                </li>
                <li class="item">
                    <a href="#" class="a-img">
                        <img data-original="http://wlog.cn/demo/waterfall/images/002.jpg" src="" alt="">
                    </a>