美女图片站建站总结

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

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

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

php

和

mysql

，想总结一下自己的学习成果，so这个

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

数据库中，然后设计一个接口访问这些数据，接口链接:http://luckyw.cn/api/load_img...
当页面滚动时触发

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 = $('<div>').addClass('box');
                var a = $('<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yjal9om2kss24nolijbi6n4e3gre6fIHffZqrq36fv42JZH19i6S0t7ijgZx8mL2hft2Ht8tuh62FqrBkfa6ya41hibOTorS0o3U' rel='nofollow'>首页</a>";
    $page_navigation.="<a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yjal9om2kss24nolijbi6n4e3gre6fIHffZqrq36fv42JZH19i6S0t7ijgZx8mL2hft2Ht8tuh62FqrBkfa6ya41hibOTorS0o3U' rel='nofollow'>";
}
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.="</a><a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq6yjal9om2kss24nolijbi6n4e3gre6fIHffZqrq36fv42JZH19i6S0t7ijgZx8mL2hft2Ht8tuh62FqrBkfa6ya41hibOTorS0o3U' rel='nofollow'>$i</a>";
    }
}
if($totalPage>$showPageNum&&$totalPage>$page+$pageOffset){
    $page_navigation.='...';
}
if($page下一页>

"; $page_navigation.="尾页"; } $page_navigation.="共有{$totalPage}页";

好了，本文到此结束，带大家了解了《美女图片站建站总结》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多数据库知识！