【吾赏美图】网站页面设计篇（二）
本帖最后由 香谢枫林 于 2020-5-9 11:59 编辑美图网站千千万，吾赏美图自己说了算！
图集列表展示页面：展示套图集的列表，点击图片可以跳转查看该图集下的所有美图（点击图片和文字跳转显示的方式不同）
此页面设计比较简单，只需用PHP把图片信息打印出来即可，此处用的table排列，对于竖图每行排列5个，横图每行排列4个。
注意：此处需要接收一个地址参数--图集名称（可以定位到图集）
核心代码如下：
<table><tr>
<td colspan="5" align="center" style="background-image: url('images/list top.jpg'); height:40px; width: 882px;"><span style="color: white">
<?php
$query = $db->query("select count(*) from ".$indexname);
$row = $db->fetch_array($query);
$index_count = $row;
$query = $db->query("select count(*) from ".$tablename);
$row = $db->fetch_array($query);
$image_counts = $row;
echo($beautyname." （总计".$index_count."套 ".$image_counts."张)</span></td></tr>");
$query = $db->query("select * from ".$indexname." order by ID ");
if($indextype == 1){
$icount = 1;
while($row=$db->fetch_array($query)){
if(($icount%5) == 1){
echo "<tr style='vertical-align: top'>";
}
$imageurl = $row['picpath'];
$flodername=$row['flodername'];
$avname = $row['girlname'];
$imagelink="imageshow.php?tablename=".$tablename."&flodername=".rawurlencode($flodername);
$imagelink1="imageshowd.php?tablename=".$tablename."&flodername=".rawurlencode($flodername);
echo ("<td><div class='newface'><div class='thum'><a href='".$imagelink."' target='_blank'>");
echo ("<img src='".$imageurl."' width='195' border='0'>");
echo ("</a></div><div class='open'><a href='".$imagelink1."' target='_blank'>".$avname."</a></div></div></td>");
if(($icount%5) == 0){
echo "</tr>";
}
$icount++;
}
}elseif($indextype == 2){
$icount = 1;
while($row=$db->fetch_array($query)){
if(($icount%4) == 1){
echo "<tr>";
}
$imageurl = $row['picpath'];
$flodername=$row['flodername'];
$avname = $row['girlname'];
$imagelink="imageshow.php?tablename=".$tablename."&flodername=".rawurlencode($flodername);
$imagelink1="imageshowd.php?tablename=".$tablename."&flodername=".rawurlencode($flodername);
echo ("<td><div class='newface'><div class='thum'><a href='".$imagelink."' target='_blank'>");
echo ("<img src='".$imageurl."' width='250' border='0'>");
echo ("</a></div><div class='open'><a href='".$imagelink1."' target='_blank'>".$avname."</a></div></div></td>");
if(($icount%4) == 0){
echo "</tr>";
}
$icount++;
}
}
?>
</table>
套图展示页面：一次显示套图集下的所有图片，考虑到有的套图数量太多，所以设置了下拉加载更多的功能
设计思路：在网页加载时，首先一次获取套图下所有的图片信息，存入一个list数据列表中；然后加载一次图片；后续再判断拉下函数，继续加载数据。
需要设定的参数如下：
var tablename; //套图表名
var flodername; //套图目录名称
var num_count; //总记录数
var num_pages; //总页数
var current_page = 1; //当前页数，不能超过总页数
var pagesize = 20; //每页显示的数量
var icount = 1; //第几张图片
var timers = null;//定义一个定时器
var srcoll_flag = true; // 定义一个开关，等会用来控制多次触发
var image_json = {}; //存放获取的图片预览信息
获取数据时要用同步加载方式，否则不仅图片顺序会乱，还要用定时器判断数据什么时候获取完成：
$.ajaxSettings.async = false;
$sql = "select * from "+tablename+" where flodername='"+flodername+"' order by imageid";
$.getJSON("server.php",{pagetype:8,sql:$sql,sid:Math.random()},function (json) {
for(i in json){
image_json = {"imageid":json.imageid,"imagepath":json.imagepath,"beautyname":json.beautyname,"flodername":json.flodername,"tablename":json.tablename,"jpnname":json.jpnname,"imagename":json.imagename};
}
});
$.ajaxSettings.async = true;
下拉加载设计思路：
代码如下：
$(window).scroll(function() {
var scrollTop = $(this).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度（垂直偏移）
var scrollHeight = $(document).height();//整个文档高度
var windowHeight = $(this).height();//浏览器可视窗口高度
// alert("窗口顶端距离网页顶端高度:"+scrollTop+"\n浏览器可视窗口高度:"+windowHeight+"\n整个文档高度:"+scrollHeight);
if (scrollTop + windowHeight + 60 >= scrollHeight) {
// 此处是滚动条距离底部60px时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
if(srcoll_flag == true){
srcoll_flag = false;
if(current_page <= num_pages){
$("#img_load").css('display','block');
clearTimeout(timers);
timers = setTimeout(function(){
page_loadmore();
},500);
// page_loadmore();// 发现拉下操作，执行下拉函数
}
}
}
});
function page_loadmore() {
$("#img_load").css('display','none');
var page_a = (current_page - 1) * pagesize;
var page_b = current_page * pagesize;
for(i=0;i<num_count;i++){
if(i >= page_a && i < page_b){
$("#ph").append("<lable>ID:<a style='text-decoration: none;' href='"+image_json.imagepath+"' target='_blank'>"+image_json.imageid+"</a> Folder:<span style='color:blue'>"+image_json.flodername+"</span> Girl:<span style='color:fuchsia'>"+image_json.jpnname+"</span> Picture:<span style='color:red'>"+image_json.imagename+"</span> Num:<span style='color:DeepPink'>"+(i+1)+"/"+num_count+"</span> (<a style='text-decoration: none;' href='javascript:void(0)'><span style='color: dodgerblue' id='sp_"+image_json.imageid+"' onclick='pic_collect("+image_json.imageid+");'>收藏</span></a>)</lable><br>");
$("#ph").append("<img width='750'id='"+image_json.imageid+"' src='"+image_json.imagepath+"'><br><p>");
}
}
current_page++;
clearTimeout(timers);
timers = setTimeout(function(){
srcoll_flag = true;
},1000);
}
套图展示页面二：一次显示套图集下的所有图片，考虑到第一种方式看的不够过瘾，本次密集显示图片，增加观赏性；考虑到有的图片数量太大，此处也用了下拉加载方式；
设计思路：每行最多显示3张照片，正常显示方式有4种：竖竖竖、竖竖横、竖横、横；最后1~3张要判断，显示方式有：竖、竖竖
此处关键是算出图片的比例，每行图片的高度一致，并且宽度加起来刚好等于页面宽度（我设计是99%，留1%的空白），计算方式如下：
核心代码如下：
//第一步：加载图片
function img_load() {
$("#img_load").css('display','block');
var page_a = (current_page - 1) * pagesize;
var page_b = current_page * pagesize;
img_url.forEach(function (value,index) {
// $("#ph").append("icount:"+icount+"<br>");
if(index >= page_a && index < page_b){
var img = new Image();
img.src = value;
var timer_info = setInterval(
function () {
if(img.width > 0||img.height >0){
clearInterval(timer_info);
// $("#ph").append("index:"+index+"<br>");
image_json = {"index":index,"width":img.width,"height":img.height,"image_url":value,"image_id":imageid};
image_json_arr.push(index);
}
},40);
}
});
//检查图片加载情况，等加载结束再显示图片
var timer_check = setInterval(
function () {
var page_a = (current_page - 1) * pagesize;
var page_b = current_page * pagesize;
var progress = 0;
if(num_count <= page_b && current_page == 1){
progress = ((image_json_arr.length - page_a)/num_count).toFixed(2)*100;
}else if(current_page < num_pages){
progress = ((image_json_arr.length - page_a)/pagesize).toFixed(2)*100;
}else if(current_page == num_pages){
progress = ((image_json_arr.length - page_a)/(num_count-page_a)).toFixed(2)*100;
}
$("#img_loadd").css({'min-width':''+progress+'em','width':''+progress+'%'});
$("#img_loadd").text(progress+'%');
if(image_json_arr.length == pagesize*current_page || image_json_arr.length == num_count){
clearInterval(timer_check);
view_json();
}
}
,100);
}
//第二步：将加载的图片信息压入堆栈
function view_json() {
$("#img_load").css('display','none');
$("#img_loadd").css({'min-width':'0em','width':'0%'});
$("#img_loadd").text('0%');
var page_a = (current_page - 1) * pagesize;
var page_b = current_page * pagesize;
image_json_arr.forEach(function (value, i) {
if(i >= page_a && i < page_b){
// $("#lk").append('i:'+i+' index:'+image_json.index+' image_id:'+image_json.image_id+' width:'+image_json.width+' height:'+image_json.height+' image_url:'+image_json.image_url+'<br>');
// alert(image_json.index+"<br>"+image_json.width+"<br>"+image_json.height);
if(image_json.width < image_json.height){
if(image_url.length < 2){
imgage_info_push(image_json.image_id,image_json.image_url,image_json.width,image_json.height);
if(num_count == (image_json.index+1)){
img_view(image_url,image_width,image_height,image_id,0);
}
}else{
imgage_info_push(image_json.image_id,image_json.image_url,image_json.width,image_json.height);
img_view(image_url,image_width,image_height,image_id,1);
}
}else if(image_json.width >= image_json.height && image_json.width < image_json.height*2){
imgage_info_push(image_json.image_id,image_json.image_url,image_json.width,image_json.height);
img_view(image_url,image_width,image_height,image_id,1);
}
}
});
current_page++;
clearTimeout(timers);
timers = setTimeout(function(){
srcoll_flag = true;
},1000);
}
//第三步：显示堆栈图片
function img_view(image_url,image_width,image_height,image_id,flag) {
var imgx;
var img_width =[];
if(image_url.length == 1 && flag == 1){
image_id.forEach(function (v,k){
$("#ph").append("<img id='"+image_id+"' title='"+image_id+"' width='100%' onclick='pic_collect("+image_id+")' src='"+image_url+"'>");
});
}else if(image_url.length == 2 && flag == 1){
imgx = 99/(image_width*image_height/image_height+image_width);
img_width = image_width*image_height/image_height*imgx;
img_width = image_width*imgx;
image_id.forEach(function (v,k){
$("#ph").append("<img id='"+image_id+"' title='"+image_id+"' width='"+img_width.toFixed(2)+"%' onclick='pic_collect("+image_id+")' src='"+image_url+"'>");
});
}else if(image_url.length == 3 && flag == 1){
imgx = 99/(image_width*image_height/image_height+image_width*image_height/image_height+image_width);
img_width = image_width*image_height/image_height*imgx;
img_width = image_width*image_height/image_height*imgx;
img_width = image_width*imgx;
image_id.forEach(function (v,k){
$("#ph").append("<img id='"+image_id+"' title='"+image_id+"' width='"+img_width.toFixed(2)+"%' onclick='pic_collect("+image_id+")' src='"+image_url+"'>");
});
}else if(image_url.length == 1 && flag == 0){
image_id.forEach(function (v,k){
$("#ph").append("<img id='"+image_id+"' title='"+image_id+"' width='33%' onclick='pic_collect("+image_id+")' src='"+image_url+"'>");
});
}else if(image_url.length == 2 && flag == 0){
image_id.forEach(function (v,k){
$("#ph").append("<img id='"+image_id+"' title='"+image_id+"' width='33%' onclick='pic_collect("+image_id+")' src='"+image_url+"'>");
});
}
//清空堆栈图片信息
image_id.length = 0;
image_url.length = 0;
image_width.length = 0;
image_height.length = 0;
}
//将图片信息压入堆栈
function imgage_info_push(image_ids,image_urls,image_widths,image_heights) {
image_id.push(image_ids);
image_url.push(image_urls);
image_width.push(image_widths);
image_height.push(image_heights);
}
收藏列表页面：显示收藏图片
设计思路：取出收藏表中的数据，然后设计下拉显示即可，代码与图集列表展示页面相似，只是表名不同而已。
待我用户组晋级到前途无量时，我会将网站搭建到云服务器上共享给大家测试！
待我用户组晋级到出类拔萃时，我会开源整个网站代码！
上一篇：网站页面设计（一）
下一篇：网站数据爬取篇 赞一个 完美 楼主辛苦了，支持一下！ 谢谢楼主 ，大言不惭的提个建议，我非常喜欢网站开发的东西，楼主如果有时间，能开个网页编写视频教程，我一定会关注支持，谢谢楼主 baimaokeji 发表于 2020-5-5 14:33
谢谢楼主 ，大言不惭的提个建议，我非常喜欢网站开发的东西，楼主如果有时间，能开个网页编写视频教程，我 ...
写代码太耗时间了，而且没有观赏性，实际上写代码时候经常查询各种资料，有时遇到一个问题要大半天才能找到解决办法的 前排，做个记号 支持一下，点个赞！ 厉害了哦，不错，妹子很正 赞一个 完美 就佩服你们有思想敢干的人
页:
[1]
2