javascript实现瀑布流效果及图片加载样式

一时失言乱红尘 2022-07-15 21:28 277阅读 0赞

### javascript实现瀑布流效果及图片加载样式： ###

html代码：

<pre name="code" class="html"><DOCTTYPE!>
    <html>
    <head>
      <meta charset='utf-8'>
      <link href="index.css" type="text/css" rel="stylesheet">
       <script src="index.js" type="text/javaScript"></script>
    </head>
    <body>
    <div id='main'>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/1.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/2.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/3.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/4.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/5.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/6.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/7.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/8.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/9.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/10.jpg">
    	      </div>
    	</div>
    		<div class="box">
    	      <div class="pic">
    		       <img src="images/2.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/3.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/4.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/5.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/6.jpg">
    	      </div>
    	</div>
    	<div class="box">
    	      <div class="pic">
    		       <img src="images/7.jpg">
    	      </div>
    	      </div>
    	      <div class="box">
    	      <div class="pic">
    		       <img src="images/7.jpg">
    	      </div>
    	      </div>
    	      <div class="box">
    	      <div class="pic">
    		       <img src="images/7.jpg">
    	      </div>
    	      </div>
    	      <div class="box">
    	      <div class="pic">
    		       <img src="images/7.jpg">
    	      </div>
    	      </div>
    	      <div class="box">
    	      <div class="pic">
    		       <img src="images/7.jpg">
    	      </div>
    	      </div>
    </div>
    </body>
    </html>

css代码：

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

javascript代码：

window.onload = function(){
        waterfall('box','main');
        //此处模拟后台元素
        var dataInt={"data":[{"src":'1.jpg'},{"src":'2.jpg'},{"src":'3.jpg'}]}
        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);
                var opic = document.createElement('div');
                opic.className='pic';
                oBox.appendChild(opic);
                var oimg = document.createElement('img');
                oimg.src = "images/" + dataInt.data[i].src;
                opic.appendChild(oimg);
               }
               waterfall('box','main');
            }
        }
    }
    
    function waterfall(box,parent){
        var oParent = document.getElementById(parent);
        var oBoxs = getByClass(box,oParent);
        //获取图片所占有的全部宽度
        var oBoxW = oBoxs[0].offsetWidth;
        //图片的列数
        var cols = Math.floor(document.documentElement.clientWidth/oBoxW);
        oParent.style.cssText = 'width:' + oBoxW*cols + 'px;margin: 0 auto';
        //用数组存放图片高度，为了使下一列的图片从上一行中高度最小的图片下面排列
        var hArr = [];
        for(var i=0;i<oBoxs.length;i++){
            if(i<cols){
                //获取第一列元素的高度
                hArr.push(oBoxs[i].offsetHeight);
            }else{
                var minH = Math.min.apply(null,hArr);
                var index = getMinhIndex(hArr,minH);
                oBoxs[i].style.position = 'absolute';
                oBoxs[i].style.top = minH + 'px';
                oBoxs[i].style.left = index*oBoxW + 'px';
                hArr[index] += oBoxs[i].offsetHeight;
            }
        }
    }
    
    
    function getByClass(cName,parent){
                  var oParent=oParent?document.getElementById(parent):document,
                  eles = new Array(),
                      elements = oParent.getElementsByTagName('*');
                      for(var i=0;i<elements.length;i++){
                        if(elements[i].className == cName){
                          eles.push(elements[i]);
                        }
                      }
                      return eles;
                }
    
    //获取高度最小的元素的索引值
    function getMinhIndex(arr,val){
        for(var i in arr){
            if(arr[i] == val){
                return i;
            }
        }
    }
    
    
    //判断是否具备加载效果
    function checkScrollSlide(){
        var oParent = document.getElementById('main');
        var oBoxs = getByClass('box',oParent);
        var lastBoxH = oBoxs[oBoxs.length-1].offsetTop + Math.floor(oBoxs[oBoxs.length-1].offsetHeight/2);
        //获取页面滚动的距离，为了兼容，此处有在混合模式下和在标准模式下
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var height = document.body.clientHeight || document.documentElement.clientHeight;
        return (lastBoxH < scrollTop+height)?true:false;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript实现无限滚动加载瀑布流

实现思路 JS无限瀑布流的实现，先定义两个div，通过css把父div设置为相对定位，子div设置为绝对定位（子绝父相），通过js改变div的相对定位，来实现瀑布流的加载

男娘i/ 2023年03月04日 05:25/ 0 赞/ 69 阅读

相关微信小程序轮子 - 瀑布流布局+数据懒加载（可替换图片瀑布流懒加载 / 视频瀑布流懒加载等等）

效果图 ![在这里插入图片描述][20200817090915176.gif_pic_center] Gitee 码云仓库地址 [https://gitee.co

港控/mmm°/ 2022年11月28日 10:32/ 0 赞/ 306 阅读

相关 JavaScript、jQuery、css3实现瀑布流加载

实现的最终效果如下： ![Center][] 在实现的过程中用到的有： 1.css设置边框为圆角： border-radius: 5px;

落日映苍穹つ/ 2022年08月20日 14:24/ 0 赞/ 266 阅读

相关 “瀑布流式”图片懒加载代码解析及优化(二)

之前写过一版图片“懒加载”的文章，刚好周末在整理文件的时候，大概又看了一遍之前写的代码发现有很多可以优化的地方。这篇文章主要就是结合上篇[《“瀑布流式”图片懒加载代码示例

喜欢ヅ旅行/ 2022年08月20日 09:27/ 0 赞/ 292 阅读

相关 “瀑布流式”图片懒加载代码示例

最近项目使用到了“懒加载”，现在更新一般，因为平时主要使移动端的开发所以库文件使用的是`zepto.js` 。当然也可以和`jQuery` 通用。代码如下： /

╰半夏微凉°/ 2022年08月18日 11:52/ 0 赞/ 280 阅读

相关 javascript实现瀑布流效果及图片加载样式

javascript实现瀑布流效果及图片加载样式： html代码： <pre name="code" class="html"><DOCTTYPE!>

一时失言乱红尘/ 2022年07月15日 21:28/ 0 赞/ 278 阅读

相关 js图片加载效果（延迟加载+瀑布流加载）

概述两种图片加载的效果：一种是遇到图片较多时，带读条效果的加载提示；另一种是根据滑块的位置进行预加载，用户不察觉的情况下，实现瀑布流的加载效果详细代码下载

痛定思痛。/ 2022年05月31日 08:57/ 0 赞/ 598 阅读

相关图片瀑布流加载和购物车

图片瀑布流加载注释中为详细注释 1. 动态添加元素 // 创建图片数组方便后续添加图片路径时使用 var img = ["1.jpg",

不念不忘少年蓝@/ 2021年11月04日 14:32/ 0 赞/ 441 阅读

相关瀑布流+图片懒加载

1. 图片瀑布流效果图 ![在这里插入图片描述][20190814175900340.gif] > 步骤： > ① 创建50张图片对象 > ② 给50张

╰+哭是因爲堅強的太久メ/ 2021年10月23日 11:26/ 0 赞/ 582 阅读

相关 RecyclerView实现瀑布流效果

在上一节，我们已经简单说过StaggeredGridLayoutManager的使用，这一节给出个具体的例子，我们利用他做一个照片墙的功能，先看下效果 ![Center][]

骑猪看日落/ 2021年09月22日 05:02/ 0 赞/ 531 阅读