# xiaohongshu

**Repository Path**: chen-mu-pmf/xiaohongshu

## Basic Information

- **Project Name**: xiaohongshu
- **Description**: 仿小红书的一个页面小demo
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-16
- **Last Updated**: 2022-09-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 仿小红书页面  

# 页面介绍

简单描述：使用自己熟悉的前端技术实现小红书主页的图文无限滚动瀑布流

要求：  
1.整体上是左右两列布局，但是每个区块的高度会受图片尺寸和标题文字的限制高度不一致；  
2.实现一个生产模拟数据的函数，用于每次加载新展示的图文数据；  
3.图片源可以使用此网站https://placeholder.com/， 生产随机尺寸和颜色的图片；  
4.保证当前屏幕完整展示的内容区块项最多为4项，其他区块只展示边角内容；  
5.可以做算法或者性能优化更好；

# 实现

采用vue框架实现，生产模拟数据函数参考mock.js，性能优化利用vue的图片懒加载


# 项目部署  

## 开发环境

-  vscode  1.17  
-  node    6.14.0
-  vue-cli 5.0.1
  
## 部署

法1：使用vscode导入项目包，在vscode终端运行npm install，然后再运行npm run serve  
法2：可以不用安装vscode，直接进入项目包所在文件终端，先运行npm install，再运行npm run serve也可以


# 访问 

本系统已经部署上线，可以直接通过点击链接进行访问: http://chen-mu-pmf.gitee.io/xiaohongshu 
 

# 页面展示  

可以直接点击访问链接查看