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

最新推荐文章于 2022-05-05 14:35:58 发布
最新推荐文章于 2022-05-05 14:35:58 发布
阅读量573 收藏
点赞数
分类专栏： javascript 文章标签： javascript 瀑布流效果及图片加载样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YLXB2/article/details/52699486
版权

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;
}

 

 

 

 


 
 


                

        

        

    




    

      

        

            

              
                
                  JSS00
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
解析javascript瀑布流原理实现图片滚动加载

				
			

			

				

					01-19
				

			

		

		

			
				
这是我实现的一个效果，就是怎么滚动都加载不玩。就跟瀑布一样流啊流！  这里的实现方式我们只说Js实现方法 实现原理： 对容器中已有数据块元素进行第一次计算1 容器总宽度 2 列宽度 3 最小列数 ，得到列数后，用一...

			
		

	



                

              
                



	

		

			

				
					
网页设计之瀑布流，排列图片img最好的方式之一【代码+注释=很详细！！！】

				
			

			

				

					IT_Holmes的博客
				

				

					05-17
					
					1982
					
				

			

		

		

			
				
文章目录1.什么是瀑布流？
1.什么是瀑布流？



			
		

	



                


  
              

                


	

		

			

				
					
【HTML5】------ HTML5实现瀑布流图片

				
			

			

				

					皮皮冰要做大神
				

				

					07-29
					
					2826
					
				

			

		

		

			
				
1. 实现瀑布流图片html 实例代码如下：



body,div ,p{
    padding:0px;
    margin:0px
}
#content
{
    padding:0px;
    margin:0px auto;/* 左右居中 上下为0*/
    width:80%;/*宽为80% */
}
#content .note
{
    column-gap:20px...

			
		

	





	

		

			

				
					
5分钟教你搞定瀑布流样式

				
			

			

				

					萝卜666的博客
				

				

					03-22
					
					1450
					
				

			

		

		

			
				
首先，我们来讲一下什么是瀑布流嘞？在某些个以图片为主的网站中，单一的布局那什么来吸引眼球，当然是尽量炫酷的布局了。瀑布流又称瀑布流式布局，是现在流行的一种布局方式。知道了这些，那瀑布流布局实现的原理是什么呢？

关于瀑布流算法



此时，可以放在第一行的图片已经就绪，分别为图片1234，这时候第一行已经放满，5号图片需要找到合适自己的位置，我们很清楚的看到，2号下面最最合适了，所以5号就登场啦



6号7号...都会依次找到属于自己的位置





知道它是怎么回事儿之后，我们转换成代码看下（vue..

			
		

	



		

			
		



	

		

			

				
					
瀑布流布局及扩展——格子块的智能堆砌

				
			

			

				

					henry_xiajin
				

				

					10-15
					
					205
					
				

			

		

		

			
				
图片分享网站[url=http://pinterest.com/]Pinterest（beta）[/url]，在不久前获得了2700$的投资，估值已超2亿元（据说现该公司团队有8人）。该网站的一大特色就是每一张分享的图片被拟作“Pin”被钉在页面上面，每一Pin依尺寸智能排列，同时滚动页面时异步加载新Pin，极具效果。这种创新模式被在国内也被广泛copy，其中最有前途的当属[url=http://...

			
		

	





	

		

			

				
					
纯css制作瀑布流样式

				
			

			

				

					hjy170314的博客
				

				

					05-25
					
					419
					
				

			

		

		

			
				
在制作瀑布流格式的时候，一开始没有发现这个问题，当我只有两行的时候，每相隔一个div的大小一样的时候，我发现我的第一列的div一小部分内容跑到第二列中去了，这使我 很无解，目前我还没有想到解决的方法用瀑布流的写法，用js进行布局倒是可以解决这个问题。

这是我的代码


<!DOCTYPE html>
<html lang="en">
<head>
    &...

			
		

	





	

		

			

				
					
JavaScript实现瀑布流以及加载效果

				
			

			

				

					10-20
				

			

		

		

			
				
主要为大家详细介绍了JavaScript实现瀑布流以及加载效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
javascript实现瀑布流加载图片原理

				
			

			

				

					10-22
				

			

		

		

			
				
主要为大家介绍了javascript实现瀑布流加载图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
JavaScript实现图片自动加载的瀑布流效果

				
			

			

				

					10-22
				

			

		

		

			
				
主要介绍了JavaScript实现图片自动加载的瀑布流效果的相关资料,需要的朋友可以参考下

			
		

	





	

		

			

				
					
JavaScript实现瀑布流图片效果

				
			

			

				

					10-19
				

			

		

		

			
				
主要为大家详细介绍了JavaScript实现瀑布流图片效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

			
		

	





	

		

			

				
					
简单的Jquery+css实现图片瀑布流

				
			

			

				

					sunny_day的博客
				

				

					08-29
					
					695
					
				

			

		

		

			
				
html:

要引入:

"jquery.min.js"
"jsliswall.js"


&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="viewport" content=

			
		

	





	

		

			

				
					
css 瀑布流样式的三种方法

				
			

			

				

					想飞的猪的博客
				

				

					08-20
					
					3111
					
				

			

		

		

			
				
可以有多列,每一个item(单元格)的高度可以不相同,但是宽度必须一样.排列的方式是,从左往右排列,哪一列现在的总高度最小,就优先排序把item(单元格)放在这一列.这样排完所有的单元格后,可以保证每一列的总高度都相差不大,不至于,有的列很矮,有的列很高.这样就很难看了 

一、

1、column-count 把div中的文本分为多少列

2、column-width 规定列宽

3、colum...

			
		

	





	

		

			

				
					
前端图片实现以瀑布流样式显示

				
			

			

				

					weixin_34235135的博客
				

				

					02-06
					
					643
					
				

			

		

		

			
				
实现方式一：
　　Django模版语言
　　　　filter
　　　　simpletag(为什么这里不能用)

方式二：
　　javascript 实现
转载于:https://www.cnblogs.com/hellojesson/p/6370151.html...

			
		

	





	

		

			

				
					
css实现页面瀑布流样式的方法

				
			

			

				

					weixin_45547638的博客
				

				

					05-05
					
					2735
					
				

			

		

		

			
				
css实现页面瀑布流样式的方法
两种方法：1，css3的样式 column-count    2，flex布局方式
方法一：** column-count 方式，这种方式IE浏览器不支持（10以下）更适合手机端使用，
缺点是：图片是先从上到下排列，再从左到右排列的**
body {
margin:0 auto;
width:500px;
}
.box{
column-count: 4;//显示的列数（几列显示）
column-gap: 10px;//每列之间的间隔距离
}
//---------------

			
		

	





	

		

			

				
					
图片瀑布流效果

				
			

			

				

					他的博客
				

				

					06-25
					
					2879
					
				

			

		

		

			
				
使用js实现的页面图片瀑布流效果：

HTML代码：(页面是通过滚动条滚动事件触发的方法)
<div id="overall">
			<div class="one">
				<div class="one_id">
					<img src="images/62867899.jpg">
				</div>
			</div...

			
		

	





	

		

			

				
					
js或jquery如何获取父级、子级、兄弟元素

				
			

			

				

					YLXB2的博客
				

				

					01-23
					
					1775
					
				

			

		

		

			
				
js或jquery如何获取父级、子级、兄弟元素


原生javascript方法：
  
      var dom = document.getElementById("dom");


      dom.childNodes; //获取a的全部子节点
      dom.parentNode; //获取a的父节点
      dom.nextSibling; //获取a的

			
		

	





	

		

			

				
					
JavaScript中的几种继承方式

				
			

			

				

					YLXB2的博客
				

				

					02-25
					
					1026
					
				

			

		

		

			
				
JavaScript中的几种继承方式:
一:原型链
     让原型对象等于另一个类型的实例.此时,原型对象包含一个指向另一个原型的指针,相应地,另一个原型中也包含着指向另一个构造函数的指针.
     function  A(){
           this.prototype = true;
     }
     A.prototype.getAValue = functio

			
		

	





	

		

			

				
					
淘宝搜索框效果

				
			

			

				

					YLXB2的博客
				

				

					10-22
					
					1009
					
				

			

		

		

			
				
html代码：



  
  
  




    	
    		宝贝
    		天猫
    		店铺
    	
    	
		
		
			
			毛呢大衣
		
		
			
		
		
			高级搜索
		
	



css代码：body,ul{
	margin:0;
	padding:0;
}
.search_help{
     position: relative;


			
		

	





	

		

			

				
					
JS实现数组去重

				
			

			

				

					YLXB2的博客
				

				

					05-14
					
					869
					
				

			

		

		

			
				
1.双循环去重。先将数组的第一个元素赋值给一个新数组，再用两个嵌套的for循环。从数组的第二个元素开始比较该元素与新数组中是否有重复的元素，如果有就跳出当前循环；如果没有就把第二个元素赋值给新的数组。然后从数组的第三个元素又开始，如此循环下去，最后返回新的数组（即去重后的数组）。如果数组很大的话就不是特别建议使用这种方法，因为这样很占内存。

let arr = [1,2,2,3,2,5,6]

...

			
		

	





	

		

			

				
					
jq  实现 瀑布流

					
最新发布

				
			

			

				

					06-02
				

			

		

		

			
				
要使用jq实现瀑布流，可以按照以下步骤进行操作：

1. 首先，定义一些CSS样式，包括每个瀑布流块的宽度、高度、边距等。

2. 使用jQuery选择器选中瀑布流容器，并使用方法如下：

   ```javascript
   var $container = $('#container');
   ```

3. 使用jQuery的ajax方法来获取数据，并在成功回调函数中将数据添加到瀑布流容器中。可以使用方法如下：

   ```javascript
   $.ajax({
       url: 'data.json',
       dataType: 'json',
       success: function(data) {
           $.each(data, function(index, value) {
               var $box = $('<div>').addClass('box').appendTo($container);
               var $img = $('<img>').attr('src', value.url).appendTo($box);
           });
       }
   });
   ```

4. 当所有图片加载完成后，使用jQuery的masonry插件来实现瀑布流布局，可以使用方法如下：

   ```javascript
   $container.imagesLoaded(function() {
       $container.masonry({
           itemSelector: '.box',
           isAnimated: true
       });
   });
   ```

通过以上步骤，就可以使用jq实现瀑布流了。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值