jquery.waterfall.js jquery瀑布流布局js插件


jquery.waterfall.js jquery瀑布流布局js插件

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.waterfall"], function() {
                $("#div1").waterfall({
                    itemClass: ".box",
                    minColCount: 2,
                    spacingHeight: 10,
                    resizeable: true,
                    ajaxCallback: function(success, end) {
                        var data = {
                            "data": [{
                                "src": "//repo.bfw.wiki/bfwrepo/image/bfwdemo.png"
                            }, {
                                "src": "//repo.bfw.wiki/bfwrepo/image/bfwdemo.png"
                            }, {
                                "src": "//repo.bfw.wiki/bfwrepo/image/bfwdemo.png"
                            }, {
                                "src": "//repo.bfw.wiki/bfwrepo/image/bfwdemo.png"
                            }, {
                                "src": "//repo.bfw.wiki/bfwrepo/image/bfwdemo.png"
                            }, {
                                "src": "//repo.bfw.wiki/bfwrepo/image/bfwdemo.png"
                            }]};
                        var str = "";
                        var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"> <img src="{{src}}" alt="" /></div>';

                        for (var i = 0; i < data.data.length; i++) {
                            str += templ.replace("{{src}}", data.data[i].src);
                        }
                        $(str).appendTo($("#div1"));
                        success();
                        end();
                    }
                });

            });
        });
    </script>
    <style>
        * {
            margin: 0;
        }
        .container {
            margin-top: 50px;
        }
        #div1 {
            margin: auto;
            position: relative;
        }
        .box {
            float: left;
            padding: 10px;
            border: 1px solid #ccc;
            background: #f7f7f7;
            box-shadow: 0 0 8px #ccc;
        }
        .box:hover {
            box-shadow: 0 0 10px #999;
        }
        .box img {
            width: 240px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content bgcolor-3">
            <div id="div1">
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>

                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>
                <div class="box">
                    <img src="//repo.bfw.wiki/bfwrepo/image/bfwdemo.png" alt="">
                </div>

            </div>
        </div>
    </div>
</body>
</html>


立即下载jquery.waterfall.js查看所有js插件

网友评论0

程序员在线工具箱