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

lfgg_yyds

已于 2022-04-25 13:35:29 修改

阅读量1.9k

点赞数 1

分类专栏： css javaScript node 文章标签：前端 javascript

于 2022-04-23 19:06:24 首次发布

本文链接：https://blog.csdn.net/weixin_57098738/article/details/124366813

版权

javaScript 同时被 3 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

node

3 篇文章 0 订阅

订阅专栏

首先在搭起一台服务器（请求数据用），新建文件夹，打开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，item
                item.classList.add('item', "bg_white")
                // 创建img标签
                let goodsPic = createElement('img')
                // 设置图片路径
                goodsPic.src = column[i].image_uri
                // 为图片添加类名goodsPic
                goodsPic.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.lists
        for (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，item
                item.classList.add('item', "bg_white")
                // 创建img标签
                let goodsPic = createElement('img')
                // 设置图片路径
                goodsPic.src = column[i].image_uri
                // 为图片添加类名goodsPic
                goodsPic.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.lists
            for (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，item
                item.classList.add('item', "bg_white")
                    // 创建img标签
                let goodsPic = createElement('img')
                    // 设置图片路径
                goodsPic.src = column[i].image_uri
                    // 为图片添加类名goodsPic
                goodsPic.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>

效果图

lfgg_yyds

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生JS动态创建html，实现瀑布流布局-

首先在server(node)文件夹下打开cmd,node server 将服务器运行起来,端口号默认是3000 在index.html使用fetch请求服务器返回的数据（API地址:localhost:3000）根据服务端返回的数据重新包装成2维数组（左右各一列）假设后台返回的数组里有10个元素，拆分后，左边5元素，右边5元素。奇数放左边，偶数放右边 // // 创建多维度数组 // function mxsColumnsArr(colums, ori..
复制链接

扫一扫