waterfall实现向下滚动瀑布流图片加载效果代码-html代码-BFW代码库

waterfall实现向下滚动瀑布流图片加载效果代码

代码语言：html

所属分类：瀑布流

代码描述：waterfall实现向下滚动瀑布流图片加载效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/waterfall.css">
   
</head>

<body>
    <div id="header">
        <h1>瀑布流滚动</h1>
    </div>
    <div id="container"></div>
    <script type="text/x-handlebars-template" id="waterfall-tpl">
        {{#result}}
        <div class="item">
            <img src="{{image}}" width="{{width}}" height="{{height}}" />
        </div>
        {{/result}}
    </script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
     <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mock.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/handlebars.3.0.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/waterfall.min.js"></script>
    <script>
        Mock.mock('/data/data1.json',  {"total":20,"result":[{"image":"http://wlog.cn/demo/waterfall/images/001.jpg","width":192,"height":288},{"image":"http://wlog.cn/demo/waterfall/images/002.jpg","width":192,"height":257},{"image":"http://wlog.cn/demo/waterfall/images/003.jpg","width":192,"height":288},{"image":"http://wlog.cn/demo/waterfall/images/004.jpg","width":192,"height":288},{"image":"http://wlog.cn/demo/waterfall/images/005.jpg","width":192,"height":248},{"image":"http://wlog.cn/demo/waterfall/images/006.jpg",&.........完整代码请登录后点击上方下载按钮下载查看