<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>花瓣网</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-1.12.4.js"></script>
<!-- 模板引擎 -->
<script type="text/javascript" src='js/template-native.js'></script>
<!-- 自己的瀑布流插件 -->
<script type="text/javascript" src='js/jQuery.waterfall.js'></script>
</head>
<body>
<div id="page" class="page">
<!--头部-->
<header id="header" class="header">
<div id="head_in" class="head-in contents">
<div id="header_left" class="header-left">
<ul>
<li class="logo-pic">
<h1><a href=""></a></h1>
</li>
<li><a href="">发现</a></li>
<li><a href="">最新</a></li>
<li><a href="">美思</a></li>
<li><a href="">活动<span class="new">new</span></a></li>
<li><a href="">教育</a></li>
<li><a href=""><i class="layui-icon layui-icon-more"></i></a></li>
</ul>
</div>
<div id="header_center" class=" header-center">
<input type="text" name="title" required lay-verify="required" placeholder="请搜索您喜欢的" autocomplete="off"
class="layui-input">
</div>
<div id="header_right" class="header-right">
<a href="" class=" layui-btn layui-btn-danger register" id="register">注册</a>
<a href="" class=" layui-btn layui-btn-primary login" id="login">登录</a>
</div>
</div>
</header>
<!--中间广告-->
<section class="layui-carousel" id="test1" lay-filter="test4">
<div class=slider-banner carousel-item>
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
<div><a href=""></a></div>
</div>
</section>
<!--快速登录-->
<section id="quick_login" class="quick-login">
<div class="contents quick-login-in">
<div class="quick-l">
<span class="title_top">国内最优质图片灵感库</span>
<span class="title_sub">已有数百万出众网友，用花瓣保存喜欢的图片</span>
</div>
<div class="quick-r">
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
<div class="login_icon">
<span class="line-left"></span>
<span>用以上社交账号直接登录</span>
<span class="line-right"></span>
</div>
</div>
</div>
</section>
<!--吸顶效果-->
<section id="top_nav" class="top-nav">
<div class="top-nav-in contents">
<div class="top-nav-l">
<span class="top-nav-top">国内最优质图片灵感库</span>
<span class="top-nav-sub">已有数百万出众网友，用花瓣保存喜欢的图片</span>
</div>
<div class="top-nav-r">
<ul>
<li><p>用社交账号直接登录:</p></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</div>
</div>
</section>
<!--标题样式-->
<div class="type-title">
<span class="type-left"></span>
<span>美图</span>
<span class="type-right"></span>
</div>
<!--选项卡-->
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title contents" style="border-color: transparent">
<li class="layui-this" lay-id="111">采集</li>
<li lay-id="222">推荐画板</li>
<li lay-id="333">推荐用户</li>
<li lay-id="444">订单管理</li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show contents">
<div class="dom-top">
<ul>
<li><a href="" title="花瓣，陪你做生活的设计师"></a></li>
<li><a href="" title="句子的温度"></a></li>
<li><a href="" title="每天送自己一句话"></a></li>
<li><a href="" title="孤独患者"></a></li>
<li><a href="" title="笔尖的思绪"></a></li>
</ul>
</div>
<!--瀑布流加载-->
<div class="dom-pull" id="masonry"> </div>
<div class="tips loading">
<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>
<span class="loadMord"> 加载更多</span>
</div>
</div>
<div class="layui-tab-item contents">内容2</div>
<div class="layui-tab-item contents">内容3</div>
<div class="layui-tab-item contents">内容4</div>
<div class="layui-tab-item contents">内容5</div>
</div>
</div>
</div>
<!--有浮动框-->
<div id="elevator_item"></div>
<!--登录面板-->
<section id="mask" class="mask"></section>
<script src="js/index.js"></script>
<!--自定义模板-->
<script type='text/template' id='template'>
<% for(var i=0;i
<items.length;i++){ %>
<div class="dom-pull-box">
<div class="pic">
<img src="<%=items[i].pic%>" alt="">
<div class="dom-pull-cover">
<a href="" class="dom-pull-collect layui-btn layui-btn-sm layui-btn-danger">采集</a>
<a href="" class="dom-pull-like"><i class="layui-icon layui-icon-star-fill"></i></a>
</div>
</div>
<p><%=items[i].txt%></p>
</div>
<%}%>
</script>
<!--layui -->
<script src="layui/layui.js"></script>
<script>
//layui
layui.use(['carousel', 'element', 'layer'], function () {
var $ = layui.jquery,
carousel = layui.carousel,
element = layui.element,
layer = layui.layer;
/*=============
轮播图
=============
*/
carousel.render({
elem: '#test1'
, width: '100%' //设置容器宽度
, height: '60px'
, arrow: 'none' //始终显示箭头
, anim: 'fade'
, indicator: 'none'
, interval: 5000
});
//滚动事件
carousel.on('change(test4)', function (res) {
// console.log(res)
});
/*=============
选项卡
=============
*/
var layid = location.hash.replace(/^#docDemoTabBrief=/, '');
element.tabChange('docDemoTabBrief', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项
//监听Tab切换，以改变地址hash值
element.on('tab(docDemoTabBrief)', function (data) {
console.log(data.index); //得到当前Tab的所在下标
location.hash = 'docDemoTabBrief=' + this.getAttribute('lay-id');
});
});
</script>
</body>
</html>
瀑布流布局，点击加载更多效果 （250个子文件） 
layui.css 68KB layer.css 14KB layui.mobile.css 10KB index.css 9KB laydate.css 7KB code.css 1KB .DS_Store 6KB .DS_Store 6KB iconfont.eot 40KB
59.gif 10KB 22.gif 10KB 24.gif 8KB 13.gif 7KB 16.gif 7KB 39.gif 6KB 64.gif 6KB 63.gif 6KB 50.gif 6KB loading-0.gif 6KB 4.gif 6KB 1.gif 5KB 42.gif 5KB 71.gif 5KB 21.gif 5KB 20.gif 5KB 29.gif 5KB 70.gif 4KB 5.gif 4KB 17.gif 4KB 27.gif 4KB 9.gif 4KB 44.gif 4KB 11.gif 4KB 8.gif 4KB 3.gif 4KB 23.gif 4KB 34.gif 4KB 41.gif 4KB 38.gif 4KB 65.gif 3KB 32.gif 3KB 45.gif 3KB 7.gif 3KB 12.gif 3KB 26.gif 3KB 60.gif 3KB 2.gif 3KB 40.gif 3KB 25.gif 3KB 19.gif 3KB 66.gif 3KB 18.gif 3KB 46.gif 3KB 10.gif 3KB 28.gif 3KB 51.gif 3KB 57.gif 3KB 67.gif 3KB 0.gif 3KB 48.gif 3KB 43.gif 3KB 30.gif 2KB 61.gif 2KB 33.gif 2KB 69.gif 2KB 14.gif 2KB 47.gif 2KB 36.gif 2KB 49.gif 2KB 58.gif 2KB 6.gif 2KB 54.gif 2KB 53.gif 2KB 56.gif 2KB 62.gif 2KB 31.gif 2KB 55.gif 2KB 35.gif 2KB 15.gif 2KB loading-2.gif 2KB 37.gif 1KB 68.gif 1KB 52.gif 777B loading-1.gif 701B
index.html 8KB 花瓣网.iml 281B
87.jpg 250KB 11.jpg 250KB 43.jpg 246KB 51.jpg 143KB 99.jpg 134KB top_banner06.jpg 132KB 20.jpg 112KB 9.jpg 109KB 4.jpg 106KB 50.jpg 106KB 17.jpg 104KB 19.jpg 101KB 32.jpg 100KB 16.jpg 97KB共 250 条
- 1
- 2
- 3
资源评论
