俗话说的好，不爱美女的程序员不是一个好司机！
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 = $('<div>').addClass('box');
var a = $('<a>').attr({
'href': imgs[i]['src'],
'target': '_blank'
}).addClass('item');
var img = $('<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.="<a href='".$_SERVER['PHP_SELF']."'>首页</a>";
$page_navigation.="<a href='".$_SERVER['PHP_SELF']."?page=".($page-1)."'><上一页</a>";
}
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.="<span class='active'>$i</span>";
}else{
$page_navigation.="<a href='".$_SERVER['PHP_SELF']."?page=".$i."'>$i</a>";
}
}
if($totalPage>$showPageNum&&$totalPage>$page+$pageOffset){
$page_navigation.='...';
}
if($page<$totalPage){
$page_navigation.="<a href='".$_SERVER['PHP_SELF']."?page=".($page+1)."'>下一页></a>";
$page_navigation.="<a href='".$_SERVER['PHP_SELF']."?page=".$totalPage."'>尾页</a>";
}
$page_navigation.="共有{$totalPage}页";