美女图片站建站总结

jcc 发布于2019-07-31 16:29 / 510人阅读

摘要：俗话说的好，不爱美女的程序员不是一个好司机妹子图煎蛋这几天一直在菜鸟教程学习和，想总结一下自己的学习成果，这个图片站也就这么自然而然地出来了，主要使用了图片瀑布流加载数据，页面静态化图片分页等方法进行实现图片瀑布流我这里分为两种瀑布流方法，

俗话说的好，不爱美女的程序员不是一个好司机！
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 < num) {
            arr.push(h);
        } else {
            var minH = Math.min.apply(null, arr);
            var minIndex = getMinIndex(arr, minH);
            $(ele).css({
                "position": "absolute",
                "left": box_w * minIndex,
                "top": minH
            });
            arr[minIndex] += h;
        }
    });
}
function getMinIndex(arr, h) {
    for (var i in arr) {
        if (arr[i] == h) {
            return i;
        }
    }
}

第二种方式(图片分页):
基本和上面差不多，也是获取所有的图片盒子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 = $("").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<=$end;$i++){
    if($i==$page){
        $page_navigation.="$i";
    }else{
        $page_navigation.="$i";
    }
}
if($totalPage>$showPageNum&&$totalPage>$page+$pageOffset){
    $page_navigation.="...";
}
if($page<$totalPage){
    $page_navigation.="下一页>";
    $page_navigation.="尾页";
}
$page_navigation.="共有{$totalPage}页";

云服务器专线服务建站图片百度美女小美女美女拼图游戏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/46855.html

美女图片站建站总结

摘要：俗话说的好，不爱美女的程序员不是一个好司机妹子图煎蛋这几天一直在菜鸟教程学习和，想总结一下自己的学习成果，这个图片站也就这么自然而然地出来了，主要使用了图片瀑布流加载数据，页面静态化图片分页等方法进行实现图片瀑布流我这里分为两种瀑布流方法，俗话说的好，不爱美女的程序员不是一个好司机！mm:http://mm.luckyw.cn/妹子图:http://mzt.luckyw.cn/煎蛋:...

enrecul101 2019-06-27 14:49 评论0 收藏0
7. 初步理解面向对象【连载 7】

摘要：是一种典型的面向对象编程语言。这篇文章主要是来初步理解一下面向对象的思维为下面的内容先给一个基础。针对面向对象编程的更多内容，会在后面的文章里面详细解释。他们都称之为对象。之后，我们再用编程语言，把这种映射编写出来，就是的面向对象编程啦。 showImg(https://segmentfault.com/img/remote/1460000012983458?w=900&h=500);...

keelii 2019-08-15 13:50 评论0 收藏0
【前端Talkking】CSS系列——CSS深入理解之float浮动

摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...

yankeys 2019-08-29 15:10 评论0 收藏0
不用编程实现定制图像识别系列之一：美女与野兽

摘要：今天笔者就介绍一个不用编程就能训练出深度学习定制模型的方法。答案是，是本人开发的，自认为做得比百度好，关键是从入库到训练，识别，完全不用编程。。。近年来基于深度学习的人工智能非常火。提起人工智能都觉得是高大上，好像离普通人很远，更别说训练出定制模型了。唔，不知道什么是模型，为什么要定制？好吧，你可以想象模型就是一个人，刚开始啥也不懂，使用教材（或者说样本）教他，他就能学会识别不同的...

CompileYouth 2019-08-22 16:28 评论0 收藏0
不用编程实现定制图像识别系列之一：美女与野兽

摘要：今天笔者就介绍一个不用编程就能训练出深度学习定制模型的方法。答案是，是本人开发的，自认为做得比百度好，关键是从入库到训练，识别，完全不用编程。。。近年来基于深度学习的人工智能非常火。提起人工智能都觉得是高大上，好像离普通人很远，更别说训练出定制模型了。唔，不知道什么是模型，为什么要定制？好吧，你可以想象模型就是一个人，刚开始啥也不懂，使用教材（或者说样本）教他，他就能学会识别不同的...

cooxer 2019-06-27 17:48 评论0 收藏0