JS实现瀑布流布局

(编辑：jimmy 日期: 2024/11/15 浏览：3 次 )

本文实例为大家分享了JS实现瀑布流布局展示的具体代码，供大家参考，具体内容如下

html部分

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>瀑布流布局</title>
  <script src="/UploadFiles/2021-04-02/wallpoll.js">

css部分


*{
  padding:0px;
  margin:0px;
}
.main{
  position:relative;
}
.box{
  padding:15px 0 0 10px;
  float:left;
}
.pic{
  padding:10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 5px #ccc;
  /*float:left;*/
}
img{
  width:170px;
  height:auto;
}



JS部分


window.onload=function(){
  waterfall('main','box');
  var dataInt={"data":[{"src":"0.jpg"},{"src":"1.jpg"},{"src":"2.jpg"},{"src":"3.jpg"},{"src":"4.jpg"}]}
  window.onscroll=function(){
    if(checkScrollSlide){
      for(var i=0;i<dataInt.data.length;i++){
        var oparent=document.getElementById("main");
        var box=document.createElement("div");
        box.className="box";
        oparent.appendChild(box);
        var pic=document.createElement("div");
        pic.className="pic";
        box.appendChild(pic);
        var img=document.createElement("img");
        img.src="/UploadFiles/2021-04-02/">地址。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

上一篇：详解node nvm进行node多版本管理
下一篇：js实现Tab选项卡切换效果

友情链接:杰晶网络 DDR爱好者之家南强小屋黑松山资源网白云城资源网网站地图 SiteMap