伏龙阁资源网

原生JavaScript+LESS实现瀑布流
站长资源 2024/11/25 佚名
2 0

HTML(注意包裹关系,方便js调用)

复制代码 代码如下:
 <body>
     <div id="main">
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/0.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/1.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/2.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/3.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/4.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/2.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/3.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/4.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/5.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/6.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/7.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/3.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/4.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/5.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/3.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/4.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/5.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/6.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/7.jpg">              </div>
         </div>
         <div class="box">
             <div class="pic">
                 <img src="/UploadFiles/2021-04-02/3.jpg">              </div>
         </div>
     </div>
 </body>

LESS(less预编译)

复制代码 代码如下:
 * {
     margin: 0;
     padding: 0;
 }
 #main {
     position: relative;
 
 }
 .box {
     padding:15px 0 0 15px;
     float:left;
 }
 .pic {
     padding: 10px;
     border: 1px solid #ccc;
     border-radius: 5px;
     box-shadow: 0px 0px 5px #ccc;
     img {
         width:165px;
         height:auto;
     }
 }

JavaScript(自己理解的注解)

(函数存在一定瑕疵,仅用于学习理解)

复制代码 代码如下:
 window.onload = function () {
     waterfall("main","box");
     //调用自定义函数;作用于main下的每一个box元素;
     var dataInt = { "data":[{"src":"7.jpg"},{"src":"8.jpg"},{"src":"9.jpg"},{"src":"6.jpg"}]}
     //模拟json数据;
     window.onscroll = function () {
         if (checkScrollSlide) {
         //调用自定义函数;根据函数返回值确定滚动是否超出范围;
             var oParent = document.getElementById("main");
             for (var i = 0; i < dataInt.data.length; i++) {
                 var oBox = document.createElement("div");
                 oBox.className = "box";
                 oParent.appendChild(oBox);
                 //创建box块
                 var oPic = document.createElement("div");
                 oPic.className = "pic";
                 oBox.appendChild(oPic);
                 //创建pic块
                 var oImg = document.createElement("img");
                 //创建img元素
                 oImg.src = "images/"+dataInt.data[i].src;
                 //设置图片引用;
                 oPic.appendChild(oImg);
             };
             waterfall("main","box");
             //将动态生成的数据块进行流式布局;
         };
     };
 };
 //流式布局主函数,自动调整数据块的位置;
 function waterfall (parent,box) {
     //将main下的所有box元素取出;"parent"代表父级,box代表box元素;
     var oParent = document.getElementById(parent);
     //将父级元素赋值给变量oParent;
     var oBoxs = getByClass(oParent,box);
     //通过自定义函数,获取父级下的每一个box元素;得到的是所有box元素的集合;
     //再次将这个得到的box元素的集合赋值给oBoxs;(因为作用域问题,变量不共用);
     // console.log(oBoxs.length);
     //在控制台中打印出box元素的数量,用于调试;
     var oBoxW = oBoxs[0].offsetWidth;
     //计算出每一列的宽度;offsetWidth包含内边距在内的宽度;
     // console.log(oBoxW);测试;
     var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
     //计算整个页面显示的列数(页面宽/box的宽);
     oParent.style.cssText = "width:"+oBoxW*cols+"px;margin:0 auto";
     //父元素main的宽度=每一列的宽*列数;并且左右居中;
     var hArr = [];
     //存放每一列高度的数组;
     for (var i = 0; i < oBoxs.length; i++) {
     //遍历oBoxs数组;
         if (i<cols) {
         //这里符合条件的是第一行的每列的第一个;
             hArr.push(oBoxs[i].offsetHeight);
             //得出每一列的高度放入数组中;
         }else{
         //这里的box元素已经不是第一行的元素了;
             var minH = Math.min.apply(null,hArr);
             //得出第一行的最小高度并赋值给变量;
             // console.log(minH);
             var index = getMinhIndex(hArr,minH);
             //调用自定义函数获取这个变量的index值;
             oBoxs[i].style.position = "absolute";
             oBoxs[i].style.top = minH+"px";
             oBoxs[i].style.left = oBoxW*index+"px";
             //设置当前元素的位置;
             //当前元素的left值=顶上的元素的index值*每列的宽度;
             //oBoxs[i].style.left = oBoxs[index].offsetLeft+"px";
             //第二种获取当前元素的left值;
             //此时在第index列添加了一个box元素;
             hArr[index]+=oBoxs[i].offsetHeight;
             //每一列更新后的高度=每一列原来的高度+后来添加的box元素的高度;
         };
     };
 };
 //js原生通过Class获取元素;
 function getByClass (parent,claName) {
     //通过class获取元素;(在父级parent的容器下获取claName的元素;)
     var boxArr = new Array();
     //声明数组,用来存储获取到的所有class为box的元素;
     var oElements = parent.getElementsByTagName("*")
     //声明变量用来存储此父元素下的所有子元素(*);
     for (var i = 0; i < oElements.length; i++) {
     //遍历数组oElements;
         if (oElements[i].className==claName) {
         //如果数组中的某一个元素的calss类与参数claName相同;
             boxArr.push(oElements[i]);
             //则把遍历到的这个box元素归类到boxArr数组;
         };
     };
     return boxArr;
     //调用数组后,经过一系列函数,遍历;将得到的数组返回给调用的函数;
 };
 //获取数组元素的index值;
 function getMinhIndex (arr,val) {
 //arr是父级数组;val是当前元素;
     for(var i in arr){
     //从0开始遍历;
         if(arr[i]==val){
         //找到当前元素在数组中对应的index值;
             return i;
             //函数返回值即是当前元素的index值;
         };
     };
 };
 //检测是否具备了滚动加载数据块的条件;
 function checkScrollSlide () {
     var oParent = document.getElementById("main");
     var oBoxs = getByClass(oParent,"box");
     var lastBoxH = oBoxs[oBoxs.length-1].offsetTop+Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
     //最后一个box元素距离页面顶部的高度(找到最后一个box(oBoxs.lenght-1)的offsetTop)+自身的一半;
     var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
     //浏览器滚动条滚动的距离;
     // console.log(scrollTop);
     var height = document.body.clientHeight || document.documentElement.clientHeight;
     //浏览器视口的高度;
     // console.log(height);
     return (lastBoxH<scrollTop+height)?true:false;
     //页面滚动的距离是否大于最后一个box元素的offsetTop;
 };

总结：

用瀑布流来展现照片再好不过了，下面是瀑布流（每一行的长度等于浏览器窗口的长度）的一种实现方式，也可以用css3实现，很简单，谷歌一下你就知道。
我的思路大概是一张一张的图片插入，当这一行的图片保持长宽比例不变并且高度低于250时就完成一个了循环，即这一行插入进去了，。
然后进入下一个循环插入下一行。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接