美女图片站建站总结

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《美女图片站建站总结》，聊聊MySQL、PHP、ajax、静态化，我们一起来看看吧！

俗话说的好，不爱美女的程序员不是一个好司机！
mm:http://mm.luckyw.cn/
妹子图:http://mzt.luckyw.cn/
煎蛋:http://jd.luckyw.cn/

这几天一直在菜鸟教程学习

php

mysql

mm

图片瀑布流

ajax加载数据

php页面静态化

图片分页

图片瀑布流

我这里分为两种瀑布流方法，第一种方式(首页静态化页面

index.html

boxes

box_w

W

num

$('#imgBox')

列数 × 每个图片盒子的宽度

arr

arr

minH

minIndex

imgBox

position:relative

position:absolute

left

top

ajax

function waterfall() {
    var boxes = $('.box');
    var box_w = boxes.eq(0).outerWidth(true);
    var W = document.body.clientWidth || document.documentElement.clientWidth;
    var num = Math.floor(W / box_w); //5
    $('#imgBox').width(num * box_w);
    $('.w').width(num * box_w);
    var arr = [];
    boxes.each(function(index, ele) {
        var h = $(ele).outerHeight(true);
        if (index 

第二种方式(图片分页):
基本和上面差不多，也是获取所有的图片盒子

boxes

box_w

W

num

$('#imgBox')

列数 × 每个图片盒子的宽度

num

div

box_w

display

inline-block

dom

ajax加载数据

我这里是采用

python

mysql

ajax

ajax

ajax

/**
 * ajax请求图片数据
 * @param s:开始位置
 * @param n:每页数
 */
function ajax(s, n) {
    $.ajax({
        url: 'http://luckyw.cn/api/load_img.php?start=' + s + '&num=' + n,
        method: 'GET',
        dataType: "json",
        success: function(data) {
            var imgs = data.list;
            for (var i in imgs) {
                var box = $('
').addClass('box');
                var a = $('').attr({
                    'href': imgs[i]['src'],
                    'target': '_blank'
                }).addClass('item');
                var img = $('').attr('src', imgs[i]['src']);
                a.append(img);
                box.append(a);
                $('#imgBox').append(box);
            }
            start += num;
            loading = false;
            waterfall();
        },
        error: function(err) {
            if (err) console.log(err);
        }
    });
}
php页面静态化
这里我只简单说下原理:是利用了
php
的缓存机制
output_buffering
，然后把使用
file_put_contents
把缓存写到文件中去，从而实现页面静态化，关键代码如下:
//index.php文件
ob_start();//如果`php.ini`没有打开缓存，这里打开缓存
require_once ('temp.php');    //加载模板文件
if(file_put_contents('index.html',ob_get_clean())){//把缓存写入到文件中并清空缓存
    header("location: index.html");//这里是实现页面跳转到静态文件
}else{
    echo 'error';
}
之后我们每次访问
index.php
文件就会生成并跳转到
index.html
静态化文件了
图片分页
这里基本和接口差不多类似，接口是返回数据，而这里是根据
url
地址后面所跟的参数查找到数据，并把数据用盒子包装起来直接添加到容器中去，关键的是分页的实现，理清逻辑很好理解，在此我就不详述了，简单看下代码:
$start = 1;
$end = $totalPage;
$showPageNum = 5;
$pageOffset = ($showPageNum-1)/2;
$page_navigation = '';
if($page>1){
    $page_navigation.="首页";
    $page_navigation.="";
}
if($totalPage>$showPageNum){
    if($page>$pageOffset+1){
        $page_navigation .= '...';
    }
    if($page>$pageOffset){
        $start = $page-$pageOffset;
        $end = $totalPage>$page+$pageOffset?$page+$pageOffset:$totalPage;
    }else{
        $start = 1;
        $end = $showPageNum;
    }
    if($page+$pageOffset>$totalPage){
        $start = $start - ($page+$pageOffset-$end);
    }
}
for($i=$start;$i$i";
    }else{
        $page_navigation.="$i";
    }
}
if($totalPage>$showPageNum&&$totalPage>$page+$pageOffset){
    $page_navigation.='...';
}
if($page下一页>
";
    $page_navigation.="尾页";
}
$page_navigation.="共有{$totalPage}页";
好了，本文到此结束，带大家了解了《美女图片站建站总结》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多数据库知识！