原生js实现栅格布局（3列、4列、5列）

最新推荐文章于 2023-02-24 16:03:59 发布
最新推荐文章于 2023-02-24 16:03:59 发布
阅读量1.3k 收藏 3
点赞数 1
文章标签： javascript css dom 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44109827/article/details/123168378
版权

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>九宫格布局/珊栏布局</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      #wrap {
        /* 清除浮动 */
        overflow: hidden;
      }
      #wrap .item {
        width: 248px;
        height: 360px;
        font-size: 12px;
      }
      #wrap .item .title {
        width: 248px;
        height: 30px;
        line-height: 30px;
        overflow: hidden;
        margin-bottom: 10px;
      }
      .imgContainer {
        width: 248px;
        /* 以单元格形式显示 */
        display: table-cell;
        text-align: center;
      }
      #wrap .item .price {
        color: #ff6700;
        font-size: 18px;
        font-weight: bold;
      }
      img {
        width: 240px;
        height: 240px;
      }
    </style>
  </head>
  <body>
    <!-- 按钮组 -->
    <div class="cols">
      <button>3列</button>
      <button>4列</button>
      <button>5列</button>
    </div>
    <!-- 珊栏布局 -->
    <div id="wrap">
      <!-- 第一张 -->
      <div class="item">
        <!-- 图片 -->
        <div class="imgContainer">
          <img src="./images/img01.jpg" alt="" />
        </div>
        <!-- 标题 -->
        <p class="title">商品标题1</p>
        <!-- 价格 -->
        <p class="price">￥100</p>
      </div>
      <!-- 第二张 -->
      <div class="item">
        <!-- 图片 -->
        <div class="imgContainer">
          <img src="./images/img02.jpg" alt="" />
        </div>
        <!-- 标题 -->
        <p class="title">商品标题2</p>
        <!-- 价格 -->
        <p class="price">￥200</p>
      </div>
      <!-- 第三张 -->
      <div class="item">
        <!-- 图片 -->
        <div class="imgContainer">
          <img src="./images/img03.jpg" alt="" />
        </div>
        <!-- 标题 -->
        <p class="title">商品标题3</p>
        <!-- 价格 -->
        <p class="price">￥300</p>
      </div>
      <!-- 第四张 -->
      <div class="item">
        <!-- 图片 -->
        <div class="imgContainer">
          <img src="./images/img04.jpg" alt="" />
        </div>
        <!-- 标题 -->
        <p class="title">商品标题4</p>
        <!-- 价格 -->
        <p class="price">￥400</p>
      </div>
      <!-- 第五张 -->
      <div class="item">
        <!-- 图片 -->
        <div class="imgContainer">
          <img src="./images/img05.jpg" alt="" />
        </div>
        <!-- 标题 -->
        <p class="title">商品标题5</p>
        <!-- 价格 -->
        <p class="price">￥500</p>
      </div>
      <!-- 第六张 -->
      <div class="item">
        <!-- 图片 -->
        <div class="imgContainer">
          <img src="./images/img06.jpg" alt="" />
        </div>
        <!-- 标题 -->
        <p class="title">商品标题6</p>
        <!-- 价格 -->
        <p class="price">￥600</p>
      </div>
      <!-- 第七张 -->
      <div class="item">
        <!-- 图片 -->
        <div class="imgContainer">
          <img src="./images/img07.jpg" alt="" />
        </div>
        <!-- 标题 -->
        <p class="title">商品标题7</p>
        <!-- 价格 -->
        <p class="price">￥700</p>
      </div>
      <!-- 第八张 -->
      <div class="item">
        <!-- 图片 -->
        <div class="imgContainer">
          <img src="./images/img08.jpg" alt="" />
        </div>
        <!-- 标题 -->
        <p class="title">商品标题8</p>
        <!-- 价格 -->
        <p class="price">￥800</p>
      </div>
      <!-- 第九张 -->
      <div class="item">
        <!-- 图片 -->
        <div class="imgContainer">
          <img src="./images/img09.jpg" alt="" />
        </div>
        <!-- 标题 -->
        <p class="title">商品标题9</p>
        <!-- 价格 -->
        <p class="price">￥900</p>
      </div>
    </div>
    <script>
      // 1.获取事件标签
      var btns = document.getElementsByTagName("button");
      var items = document.getElementsByClassName("item");
      // 2. 为标签添加事件监听
      // (1) 三列
      btns[0].onclick = function () {
        _flex(3);
      };
      //   (2)四列
      btns[1].onclick = function () {
        _flex(4);
      };
      // （3）五列
      btns[2].onclick = function () {
        _flex(5);
      };
      function _flex(colsNum) {
        // 循环遍历item
        for (var i = 0; i < items.length; i++) {
          items[i].style.float = "left";
          items[i].parentNode.style.width =
            items[i].offsetWidth * colsNum + "px";
        }
      }
    </script>
  </body>
</html>

效果：

三列

四列

 

五列

 

 

想做一只快乐的修狗
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JS 图片三行五列平铺效果
qhx556的专栏
04-16 2785
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml">                   // 定时器          var timeDelay;          // 图片自动浏览时的时间间隔          var timeInterval
四十四、栅格系统实现(JavaScript原生脚本、媒体查询)
付之一笑的专栏
01-06 591
前言：我们在学习bootstrap前端框架技术的时候，会学到全局css样式：栅格系统。今天，我就用两种方式实现栅格系统，方式一：使用原生JavaScript脚本；方式二：媒体查询 bootstrap栅格系统参数信息 方式一：使用JavaScript原生脚本实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-U.
Vue Grid Layout -️ 适用Vue.js的栅格布局系统（保姆级使用教程）
热门推荐
~朴：shu的博客
11-22 3万+
在具有拖拽组成页面、组件动态调整大小、边缘碰撞监测的系统中，使用该布局无疑是最合适的。该栅格系统目前对 vue2 的支持是最好的，vue3 是需要用插件支持的，会在小节详细讲解。栅格布局难度不大，但是要理解里面的原理，并实际应用到自己的项目开发，还要结合自己项目的实际情况。
栅格布局
qq_42791548的博客
04-25 648
栅格布局 栅格布局列偏移 列嵌套 列排序 排版列偏移 第一部分 第二部分 第三部分 </div> </div> 列嵌套 sm-9 sm-3 sm-6 sm-6 sm-1 sm-2 sm-9 列排序 1111111 2222222 1111111 2222222 1111111 </div> 排版 h1.响应式布局-Bo...
2.栅格布局
007的博客
07-14 4319
    字进行页面开发,最头疼的问题在于:页面写完了,发现换个浏览器不支持了(显示风格瞬间改变).        如果要真想实现栅格,那么就必须有一个可以容纳第一个栅格的行,而多个栅格行最终就组成了一个页面.在整个bootstrap之中最多只能够存在有12个栅格        如果现在是一个宽容器的窗口,那么整个栅格都会按照宽屏幕的方式完整显示显示,而到了窄屏的页面,那么会自动改变现实的风格.栅格...
Basic-Form-validator-using-Vanilla-Javascript
05-07
8. **响应式设计**：如果使用Bootstrap4，将学习如何利用栅格系统和媒体查询实现跨设备兼容的表单布局。 9. **最佳实践**：了解如何组织代码，保持可读性和可维护性，以及遵循良好的编程习惯。 10. **错误处理**：...
Vue3学习资料自.zip
最新发布
08-01
Vue3学习资料自.zip这个压缩包文件显然包含了与Vue.js框架第三版（Vue 3）、Vite构建工具、Bootstrap 5前端框架以及Axios库相关的学习资源。让我们深入探讨这些技术，了解它们的核心特性和如何在实际项目中结合使用...
HTML5+MUI实现手机app扫码功能
03-31
实现扫码功能，通常需要借助JavaScript库，如`zxing-js/library`或`quagga`，这两个库都支持解码条形码和二维码。首先需要将这些库引入到项目中，然后配置解码参数，如扫描区域、解码格式等。例如，使用`quagga`时，...
JavaScript实现的可视化表单设计器源码.zip
05-31
提供栅格布局，并采用flex实现对齐 一键预览配置的效果 一键生成配置json数据 一键生成代码，立即可运行 提供自定义组件满足用户自定义需求 提供远端数据接口，方便用户需要异步获取数据加载 提供功能强大的高级组件...
React.js组件实现拖拽排序组件功能过程解析
10-15
在React.js中实现拖拽排序组件，主要是利用HTML5的拖放API，结合React的组件化思想，将数据与视图绑定，实现动态更新。以下是对实现过程的详细解析： 首先，HTML5的拖放API提供了`draggable`属性和一系列事件来处理...
Bootstrap实战---成长平台(栅格布局)
Season CSDN博客
07-20 290
Bootstrap实战—成长平台(栅格布局) 目标布局 我的布局：不含JS和CSS特效 我的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>融职教育</title> <!--移动设备优先--> <meta name="viewport" content="width=device-wid..
JS中把数组中的数据分割成每三个一组
renluoluo_6464的博客
03-06 4918
以下数据从后端获取用一个数组接受得到，那么如何把它分成三个一排 关键代码如下： var result = []; for(var i=0;i<data.length;i+=3){ result.push(data.slice(i,i+3)); }
html网格布局四列三行,grid网格布局基础篇：grid常用属性网格布局
weixin_32233079的博客
06-15 3140
一、Grid网格布局概述Grid网格布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，然后指定”项目所在”的单元格，可以看作是二维布局。Grid布局远比 Flex 布局强大。Grid网格布局它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。Grid 布局则是将容器划分成”行”和”列”，产生单元格，...
js 创建Table，每行3列的方式
04-14 835
table: <table style="width:100%" id="appDatas"></table> 1. var tables = []; var len = data.length; var rowNum = 3; var sumRows = len % rowNum; var sumRowMod = len / ro...
使用bootstrap的栅栏实现五列布局
qq_38822390的博客
10-25 309
我们知道，在使用Bootstrap栅格的时候，我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。 它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。如果要2等分，使用col-md-6即可；要3等分，使用col-md-4即可；但如果我们要5等分或者8等...
JavaScript伸缩盒布局、网格布局学习
weixin_45654590的博客
09-12 381
day10 15mins伸缩盒布局二级目录三级目录网格布局 伸缩盒布局 二级目录 三级目录 网格布局
bootstrap笔记之栅格系统
honey_seve7n的博客
10-13 289
  1.栅格系统通过行和列来创建布局，一行（row）被划分12等份宽度，想让列宽等于几就设置预定义类比如.col-md-4，这个元素在中等屏幕中占4份宽的列 2.所有的列必须必须是row的子元素，且只有列可以作为row的子元素，row要被包裹在.container（固定宽度）或.container-fluid(100%宽度中) &lt;div class="container"&gt; ...
js动态生成m*n的表格，并为表格设置样式(取消外边框，设置成网格）
BIGDgreen
04-02 1411
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js动态生成m*n的表格</title> <script> function insertTable(){ var m = document.getElementById("m").v...
Vue Grid Layout - 适用Vue.js的栅格布局系统（项目实例）
~朴：shu的博客
02-24 8922
Vue-Grid-Layout 基于Vue.js 的栅格布局系统，在拖拽布局的项目中可以借鉴一下；本文做项目实例，望参考，有问题欢迎留言讨论。
html表格宽度拖拽,原生js实现 拖拽改变 table表格列宽
06-12
实现 HTML 表格宽度拖拽，可以使用原生 JavaScript 来实现。以下是一个简单的实现方式： HTML 代码： ``` <table id="myTable"> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> <tr> <td>内容4</td> <td>内容5</td> <td>内容6</td> </tr> </table> ``` JavaScript 代码： ``` var table = document.getElementById("myTable"); var isResizing = false; var lastDownX = 0; // 设置每列的初始宽度 var columnWidths = [100, 100, 100]; for (var i = 0; i < table.rows[0].cells.length; i++) { table.rows[0].cells[i].style.width = columnWidths[i] + "px"; } // 鼠标按下时记录位置 table.addEventListener("mousedown", function (e) { isResizing = true; lastDownX = e.clientX; }); // 鼠标移动时改变列宽度 table.addEventListener("mousemove", function (e) { if (!isResizing) { return; } var cell = e.target.parentElement; var cellIndex = Array.from(cell.parentElement.children).indexOf(cell); var widthDiff = e.clientX - lastDownX; // 改变当前列的宽度 var newWidth = columnWidths[cellIndex] + widthDiff; if (newWidth > 0) { cell.style.width = newWidth + "px"; columnWidths[cellIndex] = newWidth; lastDownX = e.clientX; } }); // 鼠标抬起时停止改变列宽度 table.addEventListener("mouseup", function (e) { isResizing = false; }); ``` 以上代码会在表格中添加一个鼠标事件监听器，当用户按下鼠标并移动时，会根据鼠标的位置改变被选中列的宽度。需要注意的是，当用户拖动列宽度时，应该记录每列的初始宽度（在这里使用了 `columnWidths` 数组来记录），并在移动过程中修改当前列的宽度，而不是仅仅修改当前列的宽度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想做一只快乐的修狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值