原生js实现瀑布流布局

网络编程 2025/10/27 佚名

3 2 1

用js实现瀑布流布局以及通过模拟的数据加载图片，已标记注释

效果如图：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>瀑布流布局-JS实现</title>
</head>
<style type="text/css">
  *{
    margin: 0;
    padding: 0;
  }
  #main{
    position: relative;/*整体相对定位，因为每个小图片盒子的位置是通过计算再由绝对定位放置，是需要相对于main盒子*/
  }
  .box{
    padding: 15px 0 0 15px;/*padding为内边距，后面js获取的高度包括padding的距离*/
    float: left;
  }
  .pic{
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 5px #ccc;
  }
  .pic img{
    width: 165px;
    height: auto;
  }
</style>
<script type="text/javascript">
  window.onload=function(){
    var oParent=document.getElementById("main");
    var oBoxs=oParent.getElementsByClassName("box");
    waterfall('main','box');//调用瀑布布局的函数
    var dataInt={"data":[{"src":'23.jpg'},{"src":'24.jpg'},{"src":'25.jpg'}]}//模拟出要加载的图片
    window.onscroll=function(){
      if(checkscrollSlide()){//如果调用函数的返回结果为true
        //将数据块渲染到当前页面底部
        for(var i=0;i<dataInt.data.length;i++){//dataInt对象的data属性的长度
          var oBox=document.createElement('div');
          oBox.className='box';
          oParent.appendChild(oBox);//添加到父元素的最后
          var oPic=document.createElement('div');
          oPic.className='pic';
          oBox.appendChild(oPic);
          var oImg=document.createElement('img');
          oImg.src="/UploadFiles/2021-04-02/">

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

js,瀑布流

标签：

js,瀑布流

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“原生js实现瀑布流布局”

原生js实现瀑布流布局

暂无“原生js实现瀑布流布局”评论...

更新动态

2025年10月27日

原生js实现瀑布流布局

js,瀑布流

jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法

js仿拉勾网首页穿墙广告效果

评论“原生js实现瀑布流布局”

更新动态

友情链接