web学习-瀑布流布局(2)

最新推荐文章于 2025-04-21 18:21:26 发布

shangxiaommm

最新推荐文章于 2025-04-21 18:21:26 发布

阅读量342

点赞数 1

CC 4.0 BY-SA版权

分类专栏： web学习文章标签： web

本文链接：https://blog.youkuaiyun.com/shangxiaommm/article/details/50320159

web学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍了使用PHP和Node.js实现瀑布流图片加载的过程。通过session和JSON格式传递数据，在PHP中实现了图片的分批加载，并在Node.js中进行了初步尝试。文章对比了两种语言的特点，分享了开发心得。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为自己做的瀑布流加了后台代码,记录一下

php版本

通过session来储存页面中的box的个数,通过json做传递格式,通过对post的[‘action’]来判断请求的类型.是第一次加载,还是后续加载

<?php 
//初始化一些东西
header('content-type:text/html;charset=utf-8');
define('PIC_WIDTH', 200);
define('FILE_PATH','./images/');
define('START_NUM', 30);
define('NEXT_NUM',6);
session_start();
$files = array();
/**
 * [travelFile description]
 * @param  [type] &$files [description]
 * @return [type]         [description]
 */
function travelFile(&$files){
    if($handle = opendir(FILE_PATH)){
        while (($file = readdir($handle)) !== false) {
            if(!(is_dir($file)) && $file != '.' && $file != '..'){
                array_push($files, FILE_PATH.$file);
            }
        }
    }
    closedir($handle);
}
遍历了目录,找到图片所在的地址
travelFile($files);    
将这个对象压缩成json对象
class Json
{
    public $width;
    public $files;
    function __construct($width,$files){
        $this->width = $width;
        $this->files = $files;
    }
}
$json = new Json(PIC_WIDTH,$files);
if(isset($_POST['action'])){

    if($_POST['action'] == 'first'){
        $_SESSION['total'] = START_NUM;
        $json = new Json(PIC_WIDTH,array_slice($files,0,$_SESSION['total']));
    }
    if($_POST['action'] == 'next'){
        // if($_SESSIONp['total'] > $files.length){echo '';};
        $_SESSION['total'] += NEXT_NUM;
        $json = new Json(PIC_WIDTH,array_slice($files,$_SESSION['total'],6));
    }
    echo json_encode($json);
}
?>

node的版本

用node做了第一次调用的代码,然后就受不了了,感觉写的代码太烂.

var fs = require('fs');
var url = require('url');
var path = require('path');

function travelFile(dir){
    this.path = dir;
    this.travelFiles = function(callback){
        fs.readdirSync(dir).forEach(function(file){
            var pathname = path.join(dir,file);
            if(fs.statSync(pathname).isDirectory()){
                var tmp = new travelFile(pathname);
                tmp.travelFiles(callback);
            }else{
                callback && callback(pathname);
            }
        });
    };
    this.getFilesInfo = function(){
        var data = [];
        this.travelFiles(function(pathname){
            data.push(pathname);
        });
        return data;
    };
};

var files =  new travelFile('./images').getFilesInfo();
var jsondata = JSON.stringify({'width':'200','files':files});
var server = http.createServer(function(request,respons){
    if(request.method == 'GET'){
        if(request.url.match('jpg')){
            console.log(request.url);
            fs.readFile('.' + request.url,function(err,data){
                if(err){
                    respons.writeHead(404,{'Content-Type':'text/html','Content':'fd'});
                }else{
                    respons.writeHead(200,{'Content-Type':'image/jpg'});
                    respons.write(data);
                }
                respons.end();
            });
        }else if(request.url == '/'){
            fs.readFile('./indexJQery.html',function(err,data){
            if(err){
                respons.writeHead(404,{'Content-Type':'text/html'});
            }else{
                respons.writeHead(200,{'Content-Type':'text/html'});
                respons.write(data.toString());
            }
            respons.end();
            });
        }else if(request.url.match('jquery')){
            fs.readFile('./jquery-2.1.4.min.js',function(err,data){
                if(err){
                    respons.writeHead(404,{'Content-Type':'text/html'});
                }else{
                    respons.writeHead(200,{'Content-Type':'text/html'});
                    respons.write(data.toString());
                    respons.end();
                }
            })

        }
    }else if(request.method == 'POST'){
        respons.writeHead(200,{'Content-Type':'plain/text','charset':'utf-8'});
        respons.write(jsondata.toString());
        respons.end();
    }else{
        respons.writeHead(404,{'Content-Type':'text/html'});
        respons.end();
    };
});
server.listen(3000,'127.0.0.1');

个人总结

php的apache做了太多的事情了,用node.js之后我才知道apache的好处.要把对服务器的每一次请求都要做一个配置.当时有个jquery一直不能用.想啦半天都不知道是怎么回事,后来知道是没给get请求做一个判断,没给get jquery做一个判断…….坑了好长时间
nodejs的代码情况分之很多,不知道想express的app.use()怎么写的,写的那么简洁
学习node之后,对http请求头,跟http响应头的作用理解更深了.在php下,一直没注意这些东西.