首先在搭起一台服务器（请求数据用），新建文件夹，打开cmd npm init -y 初始化包配置文件
然后下载依赖包npm i mockjs express cors

源代码（服务端server.js文件），这里使用了MockJS模拟数据，cors包是解决跨域问题，express是Web 开发框架,mockjs是随机生成一些虚拟数据

const express = require('express')
const app = express()
const cors = require('cors')
const port = 30000
const Mock = require('mockjs')
app.use(cors())
app.get('/', (req, res) => res.send('Hello World!'))
//API地址 /goods/lists
app.get('/goods/lists', (req, res) => {const image_uri = ['https://lfgg-bucket.oss-cn-guangzhou.aliyuncs.com/images/202203162138645.JPG', 'https://lfgg-bucket.oss-cn-guangzhou.aliyuncs.com/images/202203162139773.JPG']res.send(Mock.mock({'code': 200,'lists|1-100': [{'id|+1': 1,"image_uri|1": image_uri,'date|+1': "@date(yyyy-MM-dd HH:mm:ss)",'status|+1': "@integer(1, 3)","price|1": '@float(1,300)','mockTitle|1': ['可口可乐', '雪碧', '王老吉', "欧文4", "詹姆斯15", "Nike卫衣"],'mockContent|1': ['好喝的可口可乐', '透心凉雪碧', '清热解毒王老吉'],}]}))
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`))

server(你的文件夹)下打开cmd,node server(你的JS文件名) 将服务器运行起来,端口号默认是30000（可自行设置），看到Example app listening on port 30000 说明服务已成功运行，在客户端使用fetch请求服务端

接下来打开网页输入localhost：30000/goods/lists(我这里是/goods/lists)，能看到数据说明服务端正常运行

在index.html使用fetch请求服务器返回的数据（localhost：30000/goods/lists）
  // 请求商品列表数据async function getGoodsLists() {return await fetch('http://localhost:30000/goods/lists').then(res => res.json())}
根据服务端返回的数据重新包装成2维数组（左右各一列）

假设后台返回的数组里有10个元素，拆分后，左边5元素，右边5元素。奇数放左边，偶数放右边

    // // 创建多维度数组// function mxsColumnsArr(colums, originData) {//     let arr = []//     for (let i = 0; i < colums; i++) {//         arr[i] = []//     }//     for (var i = 0, l = originData.length; i < l; i++) {//         arr[i % 2].push(originData[i])//     }//     return arr// }

转换后动态创建html标签，并挂载到DOM上面

 // 将数据渲染到html上function renderInHtml(originData) {let listsNode = $("#lists")// 要渲染的数据originData.forEach(column => {// 创建一个li标签let li = createElement("li")// 并为li标签添加类名li.classList.add('column')// 将li标签添加到ul当中listsNode.appendChild(li)for (var i = 0; i < column.length; i++) {// 创建div标签let item = createElement('div')// 为这个div标签添加类名bg_white，itemitem.classList.add('item', "bg_white")// 创建img标签let goodsPic = createElement('img')// 设置图片路径goodsPic.src = column[i].image_uri// 为图片添加类名goodsPicgoodsPic.classList.add('goodsPic')// 将图片放进div容器当中item.appendChild(goodsPic)// 创建div标签,用于存放商品名字let name = createElement('div')// 给该标签添加文本内容name.innerText = column[i].mockTitle// 添加类名name.classList.add('name')// 将name放进item容器当中item.appendChild(name)// 创建tags标签let tags = createElement('div')// 添加类名tags.classList.add('tags')// 创建tagsSpan标签let tagsSpan = createElement('span')tagsSpan.innerText = "圆领"// 将tagsSpan放进tags容器当中tags.appendChild(tagsSpan)// 创建tagsSpan标签let tagsSpan2 = createElement('span')tagsSpan2.innerText = "内村：纯棉 "// 将tagsSpan放进tags容器当中tags.appendChild(tagsSpan2)let tagsSpan3 = createElement('span')tagsSpan3.innerText = "厚度：适中"// 将tagsSpan放进tags容器当中tags.appendChild(tagsSpan3)// 将tags放进item容器当中item.appendChild(tags)// 创建fee标签let fee = createElement('div')// 设置fee标签问本内容fee.innerText = column[i].price// 为fee标签添加类fee.classList.add("fee")// 将tags放进item容器当中item.appendChild(fee)li.appendChild(item)}});}// 一个选择器工具函数function $(ref) {return document.querySelector(ref)}// 一个创建标签工具函数function createElement(tagName) {return document.createElement(tagName)}

（客户端）（样式）

<style>* {padding: 0;margin: 0;list-style: none;}body,html {box-sizing: border-box;padding: 10px;background: #f2f2f2;}.bg_white {background: #fff;}.lists {display: flex;justify-content: space-between;flex-wrap: wrap;}.column {color: #000;width: 49.5%;height: 100vh;box-sizing: border-box;padding: 10px;}.item {width: 100%;border-radius: 10px;overflow: hidden;margin: 20px 0;}.goodsPic {width: 100%;object-fit: cover;}.name {font-size: 1.2rem;margin-left: 10px;}.tags {margin-left: 10px;color: #666;}.tags span {display: inline-block;margin: 20px 10px 20px 0px;border-right: .5px solid #666;padding-right: 15px;}.tags span:last-child {border-right: none;}.fee {margin-left: 10px;}.fee::first-letter {font-size: 0.6rem;}.fee::before {content: '￥';}.sizeLists {display: flex;overflow-x: scroll;}.sizeItem {flex-shrink: 0;width: 2rem;height: 2rem;border: 1px solid #666;padding: 5px;margin: 10px 20px;}.sizeCover {width: 100%;height: 100%;object-fit: cover;}</style>

源代码（客户端）（html）

<body><ul class="lists" id="lists"></ul>
</body>

源代码（客户端），JS代码

<script>window.onload = async function () {let res = await getGoodsLists()let lists = res.listsfor (var i = 0; i < lists.length; i++) {lists[i].price = lists[i].price.toFixed(2)}let newLists = mxsColumnsArr(2, lists)renderInHtml(newLists)}// 将数据渲染到html上function renderInHtml(originData) {let listsNode = $("#lists")// 要渲染的数据originData.forEach(column => {// 创建一个li标签let li = createElement("li")// 并为li标签添加类名li.classList.add('column')// 将li标签添加到ul当中listsNode.appendChild(li)for (var i = 0; i < column.length; i++) {// 创建div标签let item = createElement('div')// 为这个div标签添加类名bg_white，itemitem.classList.add('item', "bg_white")// 创建img标签let goodsPic = createElement('img')// 设置图片路径goodsPic.src = column[i].image_uri// 为图片添加类名goodsPicgoodsPic.classList.add('goodsPic')// 将图片放进div容器当中item.appendChild(goodsPic)// 创建div标签,用于存放商品名字let name = createElement('div')// 给该标签添加文本内容name.innerText = column[i].mockTitle// 添加类名name.classList.add('name')// 将name放进item容器当中item.appendChild(name)// 创建tags标签let tags = createElement('div')// 添加类名tags.classList.add('tags')// 创建tagsSpan标签let tagsSpan = createElement('span')tagsSpan.innerText = "圆领"// 将tagsSpan放进tags容器当中tags.appendChild(tagsSpan)// 创建tagsSpan标签let tagsSpan2 = createElement('span')tagsSpan2.innerText = "内村：纯棉 "// 将tagsSpan放进tags容器当中tags.appendChild(tagsSpan2)let tagsSpan3 = createElement('span')tagsSpan3.innerText = "厚度：适中"// 将tagsSpan放进tags容器当中tags.appendChild(tagsSpan3)// 将tags放进item容器当中item.appendChild(tags)// 创建fee标签let fee = createElement('div')// 设置fee标签问本内容fee.innerText = column[i].price// 为fee标签添加类fee.classList.add("fee")// 将tags放进item容器当中item.appendChild(fee)li.appendChild(item)}});}// 一个选择器工具函数function $(ref) {return document.querySelector(ref)}// 一个创建标签工具函数function createElement(tagName) {return document.createElement(tagName)}// 创建多维度数组function mxsColumnsArr(colums, originData) {let arr = []for (let i = 0; i < colums; i++) {arr[i] = []}for (var i = 0, l = originData.length; i < l; i++) {arr[i % 2].push(originData[i])}return arr}// 请求服务器商品列表数据async function getGoodsLists() {return await fetch('http://localhost:3000/goods/lists').then(res => res.json())}
</script>

源文件（客户端）（index.html）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0;list-style: none;}body,html {box-sizing: border-box;padding: 10px;background: #f2f2f2;}.bg_white {background: #fff;}.lists {display: flex;justify-content: space-between;flex-wrap: wrap;}.column {color: #000;width: 49.5%;height: 100vh;box-sizing: border-box;padding: 10px;}.item {width: 100%;border-radius: 10px;overflow: hidden;margin: 20px 0;}.goodsPic {width: 100%;object-fit: cover;}.name {font-size: 1.2rem;margin-left: 10px;}.tags {margin-left: 10px;color: #666;}.tags span {display: inline-block;margin: 20px 10px 20px 0px;border-right: .5px solid #666;padding-right: 15px;}.tags span:last-child {border-right: none;}.fee {margin-left: 10px;}.fee::first-letter {font-size: 0.6rem;}.fee::before {content: '￥';}.sizeLists {display: flex;overflow-x: scroll;}.sizeItem {flex-shrink: 0;width: 2rem;height: 2rem;border: 1px solid #666;padding: 5px;margin: 10px 20px;}.sizeCover {width: 100%;height: 100%;object-fit: cover;}</style>
</head><body><ul class="lists" id="lists"></ul>
</body>
<script>window.onload = async function() {let res = await getGoodsLists()let lists = res.listsfor (var i = 0; i < lists.length; i++) {lists[i].price = lists[i].price.toFixed(2)}let newLists = mxsColumnsArr(2, lists)renderInHtml(newLists)}// 将数据渲染到html上function renderInHtml(originData) {let listsNode = $("#lists")// 要渲染的数据originData.forEach(column => {// 创建一个li标签let li = createElement("li")// 并为li标签添加类名li.classList.add('column')// 将li标签添加到ul当中listsNode.appendChild(li)for (var i = 0; i < column.length; i++) {// 创建div标签let item = createElement('div')// 为这个div标签添加类名bg_white，itemitem.classList.add('item', "bg_white")// 创建img标签let goodsPic = createElement('img')// 设置图片路径goodsPic.src = column[i].image_uri// 为图片添加类名goodsPicgoodsPic.classList.add('goodsPic')// 将图片放进div容器当中item.appendChild(goodsPic)// 创建div标签,用于存放商品名字let name = createElement('div')// 给该标签添加文本内容name.innerText = column[i].mockTitle// 添加类名name.classList.add('name')// 将name放进item容器当中item.appendChild(name)// 创建tags标签let tags = createElement('div')// 添加类名tags.classList.add('tags')// 创建tagsSpan标签let tagsSpan = createElement('span')tagsSpan.innerText = "圆领"// 将tagsSpan放进tags容器当中tags.appendChild(tagsSpan)// 创建tagsSpan标签let tagsSpan2 = createElement('span')tagsSpan2.innerText = "内村：纯棉 "// 将tagsSpan放进tags容器当中tags.appendChild(tagsSpan2)let tagsSpan3 = createElement('span')tagsSpan3.innerText = "厚度：适中"// 将tagsSpan放进tags容器当中tags.appendChild(tagsSpan3)// 将tags放进item容器当中item.appendChild(tags)// 创建fee标签let fee = createElement('div')// 设置fee标签问本内容fee.innerText = column[i].price// 为fee标签添加类fee.classList.add("fee")// 将tags放进item容器当中item.appendChild(fee)li.appendChild(item)}});}// 一个选择器工具函数function $(ref) {return document.querySelector(ref)}// 一个创建标签工具函数function createElement(tagName) {return document.createElement(tagName)}// 创建多维度数组function mxsColumnsArr(colums, originData) {let arr = []for (let i = 0; i < colums; i++) {arr[i] = []}for (var i = 0, l = originData.length; i < l; i++) {arr[i % 2].push(originData[i])}return arr}// 请求服务器商品列表数据async function getGoodsLists() {return await fetch('http://localhost:30000/goods/lists').then(res => res.json())}
</script></html>

效果图

原生JS动态创建html，实现瀑布流布局-相关推荐

js动态生产html元素,js 动态创建 html元素
js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...
html div 移除,js动态创建及移除div的方法
本文实例讲述了js动态创建及移除div的方法.分享给大家供大家参考.具体实现方法如下: //创建div function createDiv(){ if(document.getElementById ...
通过js动态创建标签，并设置属性
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个d ...
js动态创建div等元素实例
为了节省时间,就直接贴代码了!希望大家多多的关注我! <html><head><title>js动态创建div等元素实例</title><styl ...
js动态修改html标签属性,通过js动态创建标签,并设置属性方法
当我们在写jsp页面时,往往会遇到这种情况:从后台获取的数据个数不确定,此时在前端写jsp页面时也就不确定怎么设计了.这个时候就需要通过js动态创建标签: 1.创建某个标签:如下在body中创建一个d ...
实现js动态创建img并使用canvas画线连接
实现js动态创建img,使用canvas画线连接img,当背景图更换时,重新绘制img及连接线. 前台页面 @{ Layout = null; } <!DOCTYPE html> ...
js动态创建表格以及赋值
1.使用js动态创建表格 (1)不可编辑的表格 function creatTableA() {var tbody = document.querySelector('#tableA');for (v ...
纯JS实现懒加载+瀑布流布局
瀑布流布局一般用于图片布局,其视觉表现为参差不齐的多栏布局,随着页面的滑动,会不断加载新的图片. 懒加载主要用于实现提高系统的响应速度.对于图片比较多的网页,如果一次性加载出所有的图片,会导致系统的加 ...
html给自动生成的td赋值,JS动态创建Table,Tr,Td并赋值的具体实现
成果库修改: 要求主题列表随成果类型改变而改变网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table 概要代码如下: JS //动态获取主题 ...

原生JS动态创建html，实现瀑布流布局-

效果图

原生JS动态创建html，实现瀑布流布局-相关推荐

最新文章

热门文章