create webpage project
This commit is contained in:
dengtongyu committed
commit
c659f795dd
94 files changed
+9040
No files matched your search
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
|
||||
<title>{% block title %}{% endblock %}{[title]}</title>
|
||||
<meta name="description" content="{[description]}">
|
||||
<meta name="keywords" content="{[keywords]}">
|
||||
<script>
|
||||
!function(){var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{b.innerHTML=a}catch(c){b.innerText=a}}();
|
||||
</script>
|
||||
<script>
|
||||
!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("将根据已有的meta标签来设置缩放比例");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(a){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
|
||||
</script>
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<div class="content-box">{% block main %}{% endblock %}</div>
|
||||
</body>
|
||||
<script>
|
||||
var _hmt = _hmt || [];
|
||||
(function() {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?0f04900edf2f8fdee9b63f1da475ada3";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<script src="https://cdn.bootcss.com/zepto/1.0rc1/zepto.min.js"></script>
|
||||
<script src="http://dl2.vip.yystatic.com/assets/js/template2.0.4.min.js"></script>
|
||||
{% block footer %}{% endblock %}
|
||||
</html>
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "图吧",
|
||||
"description":"美女,内涵图,图吧",
|
||||
"keywords":"美女,内涵图,图吧"
|
||||
}
|
||||
@@ -0,0 +1,123 @@
|
||||
|
||||
{% extends 'base.tpl' %}
|
||||
|
||||
{% block title %}美女图片-{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
<link href="./index.css?v={[now()]}" rel="stylesheet">
|
||||
{% endblock %}
|
||||
|
||||
{% block main %}
|
||||
|
||||
<div class="index-main" id="main">
|
||||
|
||||
{#<div class="item-block">
|
||||
<div class="big-item">
|
||||
<div class="img-box">
|
||||
<img src="http://wx2.sinaimg.cn/mw600/006oxNJJly1fhnavnvq1pj30d20zjq7f.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="small-item">
|
||||
<div class="lit-item">
|
||||
<div class="img-box">
|
||||
<img src="http://wx4.sinaimg.cn/mw600/70f421e3gy1fhn7pwznvyj20jg0t5q4f.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="lit-item mt">
|
||||
<div class="img-box">
|
||||
<img src="http://wx4.sinaimg.cn/mw600/005vbOHfgy1fhnait6kqsj30ia0wijts.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-block">
|
||||
<div class="small-item">
|
||||
<div class="lit-item">
|
||||
<div class="img-box">
|
||||
<img src="http://wx4.sinaimg.cn/mw600/70f421e3gy1fhn7pwznvyj20jg0t5q4f.jpg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="lit-item mt">
|
||||
<div class="img-box">
|
||||
<img src="http://wx4.sinaimg.cn/mw600/005vbOHfgy1fhnait6kqsj30ia0wijts.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="big-item">
|
||||
<div class="img-box">
|
||||
<img src="http://wx2.sinaimg.cn/mw600/006oxNJJly1fhnavnvq1pj30d20zjq7f.jpg">
|
||||
</div>
|
||||
</div>
|
||||
</div>#}
|
||||
|
||||
</div>
|
||||
|
||||
<div class="more-block">
|
||||
<a class="more-btn" id="more-btn" href="javascript:;">加载更多</a>
|
||||
</div>
|
||||
|
||||
<div class="pop-mark" id="pop-mark" style="display: none"></div>
|
||||
|
||||
|
||||
{% endblock %}
|
||||
|
||||
{% block footer %}
|
||||
<script id="list-tpl" type="text/html">
|
||||
{{each data as val key}}
|
||||
{{if val.length == 3}}
|
||||
{{if key%2 == 0}}
|
||||
<div class="item-block">
|
||||
<div class="big-item">
|
||||
<div class="img-box">
|
||||
<img src="{{val[0].srcUrl}}" {{if val[0].srcGifUrl}}org="{{val[0].srcGifUrl}}"{{/if}}>
|
||||
</div>
|
||||
</div>
|
||||
<div class="small-item">
|
||||
<div class="lit-item">
|
||||
<div class="img-box">
|
||||
<img src="{{val[1].srcUrl}}" {{if val[1].srcGifUrl}}org="{{val[1].srcGifUrl}}"{{/if}}>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lit-item mt">
|
||||
<div class="img-box">
|
||||
<img src="{{val[2].srcUrl}}" {{if val[2].srcGifUrl}}org="{{val[2].srcGifUrl}}"{{/if}}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="item-block">
|
||||
<div class="small-item">
|
||||
<div class="lit-item">
|
||||
<div class="img-box">
|
||||
<img src="{{val[0].srcUrl}}" {{if val[0].srcGifUrl}}org="{{val[0].srcGifUrl}}"{{/if}}>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lit-item mt">
|
||||
<div class="img-box">
|
||||
<img src="{{val[1].srcUrl}}" {{if val[1].srcGifUrl}}org="{{val[1].srcGifUrl}}"{{/if}}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="big-item">
|
||||
<div class="img-box">
|
||||
<img src="{{val[2].srcUrl}}" {{if val[2].srcGifUrl}}org="{{val[2].srcGifUrl}}"{{/if}}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/each}}
|
||||
</script>
|
||||
|
||||
<script id="pop-tpl" type="text/html">
|
||||
<div class="img-pop">
|
||||
<div class="img-main">
|
||||
<img src="{{imgUrl}}">
|
||||
</div>
|
||||
</div>
|
||||
</script>
|
||||
|
||||
<script src="./index.js?v={[now()]}"></script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,110 @@
|
||||
|
||||
|
||||
//加载弹窗组件（不用可去掉）
|
||||
//var dialog = require('../../script/extends/phone/dialog');
|
||||
|
||||
//var template = require('../../script/lib/template.min.js');
|
||||
|
||||
var startNumber = 0;
|
||||
|
||||
getList(startNumber);
|
||||
|
||||
function getList(start) {
|
||||
$.ajax({
|
||||
url:'/data/getPictureList',
|
||||
type:'GET',
|
||||
dataType:'json',
|
||||
data:{
|
||||
start:start,
|
||||
number:12
|
||||
},
|
||||
cache:false,
|
||||
success:function(json){
|
||||
if(json.result) {
|
||||
if(json.data.length >= 12) {
|
||||
var data = fixDataArray(json.data);
|
||||
$('#main').append(template('list-tpl',{data:data}));
|
||||
}else if(json.data.length < 12 && json.data.length > 0){
|
||||
var data = fixDataArray(json.data);
|
||||
$('#main').append(template('list-tpl',{data:data}));
|
||||
|
||||
$('#more-btn').html('已经没有数据了！');
|
||||
$('#more-btn').off('tap');
|
||||
}else if(json.data.length == 0) {
|
||||
$('#more-btn').html('已经没有数据了！');
|
||||
$('#more-btn').off('tap');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function fixDataArray(data) {
|
||||
var allArr = [];
|
||||
var litArr = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
litArr.push(data[i]);
|
||||
if(((i+1)!=0 && (i+1)%3==0) || i==data.length-1) {
|
||||
//console.log(litArr);
|
||||
allArr.push(litArr);
|
||||
litArr = [];
|
||||
}
|
||||
}
|
||||
return allArr;
|
||||
}
|
||||
|
||||
$('#more-btn').on('tap',function(){
|
||||
startNumber = startNumber+12;
|
||||
getList(startNumber);
|
||||
});
|
||||
|
||||
// $('#more-btn').tap(function(){
|
||||
// startNumber = startNumber+12;
|
||||
// getList(startNumber);
|
||||
// });
|
||||
|
||||
$('#main').delegate('img','tap',function(evt){
|
||||
|
||||
var _this = $(this);
|
||||
|
||||
var imgUrl = _this.attr('org')?_this.attr('org'):_this.attr('src');
|
||||
$('#pop-mark').show();
|
||||
$('.content-box').css({'overflow-y':'hidden'});
|
||||
var tpl = template('pop-tpl',{imgUrl:imgUrl});
|
||||
$('body').append(tpl);
|
||||
|
||||
var imgPop = $('.img-main');
|
||||
|
||||
loadImage(imgUrl,function(){
|
||||
var imgHeight = imgPop.find('img').height();
|
||||
|
||||
//console.log(imgHeight)
|
||||
//console.log(document.body.offsetHeight)
|
||||
if(imgHeight > document.body.offsetHeight){
|
||||
imgPop.css({display:'block'});
|
||||
}else{
|
||||
imgPop.css({display:'flex'});
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
$('body').delegate('.img-pop','tap',function(evt){
|
||||
//console.log($(this).find('img').height());
|
||||
$('#pop-mark').hide();
|
||||
$('.content-box').css({'overflow-y':'auto'});
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
function loadImage(url, callback) {
|
||||
var img = new Image(); //创建一个Image对象，实现图片的预下载
|
||||
img.src = url;
|
||||
|
||||
if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
|
||||
callback.call(img);
|
||||
return; // 直接返回，不用再处理onload事件
|
||||
}
|
||||
img.onload = function () { //图片下载完毕时异步调用callback函数。
|
||||
callback.call(img);//将回调函数的this替换为Image对象
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,94 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/*加载公共样式*/
|
||||
@import '../../style/common/phone/_common.styl';
|
||||
|
||||
html,body,.content-box {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content-box {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.index-main {
|
||||
width: 9.6rem;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.item-block {
|
||||
width: 100%;
|
||||
margin-top: 0.2rem;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
}
|
||||
|
||||
.big-item {
|
||||
width: 6.3rem;
|
||||
height: 6.4rem;
|
||||
}
|
||||
|
||||
.small-item {
|
||||
width: 3.2rem;
|
||||
height: 6.4rem;
|
||||
}
|
||||
|
||||
.img-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: #eee;
|
||||
display: flex;
|
||||
justify-content:center;
|
||||
align-items:center;
|
||||
&>img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.lit-item {
|
||||
width: 3.2rem;
|
||||
height: 3.15rem;
|
||||
}
|
||||
|
||||
.mt {
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.more-block {
|
||||
width: 9.6rem;
|
||||
margin: 0.2rem auto;
|
||||
&>.more-btn {
|
||||
display: block;
|
||||
color: #0a77fd;
|
||||
font-size: 0.4rem;
|
||||
height: 1rem;
|
||||
line-height: 1rem;
|
||||
text-align: center;
|
||||
border-radius: 0.1rem;
|
||||
border: #0a77fd solid 0.02rem;
|
||||
text-decoration:none;
|
||||
}
|
||||
}
|
||||
|
||||
.img-pop {
|
||||
width:100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 101;
|
||||
&>.img-main {
|
||||
width: 9.6rem;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
//justify-content:center;
|
||||
align-items:center;
|
||||
margin: 0 auto;
|
||||
&>img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user