1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>nav-head</title>
  6. 	<style>
  7. 		*{
  8. 			margin:0;
  9. 			padding:0;
  10. 		}
  11. 		.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}
  12.         .pull-list{
  13.         	padding:5px;
  14.         	font-size:0;
  15.         	position:relative;
  16.         }
  17.         .pull-list .pull-box{
  18.         	display:inline-block;
  19.         	float:left;
  20.         }
  21.         .pboder{
  22.         	border:1px solid #ccc;
  23.         	padding:5px;
  24.         	margin:5px;
  25.         	font-size:12px;
  26.         }
  27.         img{
  28.         	width:140px;
  29.         }
  30. 	</style>
  31. 	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  32. </head>
  33. <body>
  34. 	<div class="pull-list clearfix">
  35. 		<div class="pull-box">
  36. 			<div class="pboder">
  37. 			<img src="data:image/1.jpg">
  38.  
  39. 			</div>
  40. 		</div>
  41. 		<div class="pull-box">
  42. 			<div class="pboder">
  43. 			<img src="data:image/2.jpg">
  44.  
  45. 			</div>
  46. 		</div>
  47. 		<div class="pull-box">
  48. 			<div class="pboder">
  49. 			<img src="data:image/3.jpg">
  50.  
  51. 			</div>
  52. 		</div>
  53. 		<div class="pull-box">
  54. 			<div class="pboder">
  55. 			<img src="data:image/4.jpg">
  56. 			</div>
  57. 		</div>
  58. 		<div class="pull-box">
  59. 			<div class="pboder">
  60. 			<img src="data:image/4.jpg">
  61. 			</div>
  62. 		</div>
  63. 		<div class="pull-box">
  64. 			<div class="pboder">
  65. 			<img src="data:image/5.jpg">
  66. 			</div>
  67. 		</div>
  68. 		<div class="pull-box">
  69. 			<div class="pboder">
  70. 			<img src="data:image/6.jpg">
  71. 			</div>
  72. 		</div>
  73. 		<div class="pull-box">
  74. 			<div class="pboder">
  75. 			<img src="data:image/7.jpg">
  76. 			</div>
  77. 		</div>
  78. 	    <div class="pull-box">
  79. 			<div class="pboder">
  80. 			<img src="data:image/8.jpg">
  81. 			</div>
  82. 		</div>
  83. 	    <div class="pull-box">
  84. 			<div class="pboder">
  85. 			<img src="data:image/9.jpg">
  86. 			</div>
  87. 		</div>
  88. 	    <div class="pull-box">
  89. 			<div class="pboder">
  90. 			<img src="data:image/10.jpg">
  91. 			</div>
  92. 		</div>
  93.  
  94. 	</div>
  95.     <script src="jquery.min.js"></script>
  96. 	<script>
  97. 	  $(window).on("load",function(){
  98. 	  	function getSlist(){
  99. 	  		  var docW = $(window).width(),
  100. 	  		      boxW = $('.pull-box').eq(0).outerWidth(),
  101. 	  		      boxL = Math.floor(docW/boxW);
  102. 	  		      $(".pull-list").css({
  103. 	  		      	  "margin":"0 auto",
  104. 	  		      	  "width":boxW*boxL
  105. 	  		      })
  106. 	  		  var arrBox = [];
  107. 	  		      $('.pull-box').each(function(key,val){
  108. 	  		      	    var boxH = $(val).outerHeight();
  109. 	  		      	    if(key<boxL){
  110. 	  		      	       arrBox[key] = boxH;
  111. 	  		      	    }else{
  112. 	  		      	    	var minH = Math.min.apply(null,arrBox);
  113. 	  		      	    	var minIndex =$.inArray(minH,arrBox);
  114. 	  		      	    	$(val).css({
  115. 	  		      	    		"position":"absolute",
  116. 	  		      	    		"left":(minIndex*boxW+5)+"px",
  117. 	  		      	    		"top":(minH+5)+"px"
  118. 	  		      	    	})
  119. 	  		      	        arrBox[minIndex] += $('.pull-box').eq(key).outerHeight();
  120. 	  		      	    }
  121.  
  122. 	  		      })
  123. 	  	}
  124. 	  	getSlist();
  125.  
  126.         function checkScroll(){
  127.        	   	   $(window).scroll(function(){
  128.        	   	  	  if($(document).height() < $(window).height() + parseInt($(window).scrollTop(),10) + 50){
  129.        	   	  	        $.ajax({
  130.        	   	  	        	url:"text.json",
  131.        	   	  	        	method:"GET",
  132.        	   	  	        	success:function(data){
  133.        	                    	var res = data.list;
  134.        	                       var str = "";
  135.        	                    	for(var i=0; i<res.length; i++){
  136.        	                    		str ='<div class="pull-box">'+
  137.        	                    		'			<div class="pboder">'+
  138.        	                    		'			<img src="data:image/'+res[i]+'">'+
  139.        	                    		'			</div>'+
  140.        	                    		'		</div>';
  141.        	                    		$(".pull-list").append(str);
  142.        	                    	}
  143.        	                       getSlist();
  144.        	   	  	        	},
  145.        	   	  	        	error:function(data){
  146.        	   	  	        		console.log(data)
  147.        	   	  	        	}
  148.        	   	  	        })
  149.        	   	  	  }
  150.        	   	    });
  151.         }
  152.        checkScroll();
  153.  
  154. 	    $(window).resize(function() {
  155.              checkScroll();
  156. 	   	})
  157.  
  158. 	  })
  159.  
  160. 	</script>
  161. </body>
  162. </html>

　　

  1. text.json{
  2. 	"list":["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg"]
  3. }

　　

jquery实现瀑布流效果的更多相关文章

  1. 用jQuery实现瀑布流效果学习笔记

    jQuery一直没系统的学,只知道是js库,封装了好多js函数,方便了开发.以前做过一个原生的图片网站瀑布流效果,超级麻烦,这次用了jQuery方法,瞬间代码浓缩了,只有56行js代码.神奇的让我来把 ...

  2. 【前端】用jQuery实现瀑布流效果

    jQuery实现瀑布流效果 何为瀑布流: 瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早 ...

  3. jQuery淡入淡出瀑布流效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. jQuery实现瀑布流

    瀑布流布局多用于加载图片,或者图片配上文字.视觉表现为参差不齐的多栏布局.随着页面滚动条向下滚动,还会不断加载数据块并附加至当前尾部.本文就来利用jQuery实现一个图片瀑布流的效果. 1.布局. 首 ...

  5. Jquery简单瀑布流代码示例

    最近很多网站都采用瀑布流风格设计,感觉挺有个性的,比较合适做图片类型的网站,没事仿开心网做一个瀑布流示例. 需要用到Jquery,jquery.masonry.min.js <!DOCTYPE ...

  6. jquery版瀑布流

    一个月前用jquery实现了瀑布流效果,看着当时的代码有点难过……今天抽时间稍微修改了一下.额,现在看起来不是那么难受了,就来和大家分享一下.废话不多说,开始正题~ 一.演示效果 二.html代码 & ...

  7. RecylerView完美实现瀑布流效果

    RecylerView包含三种布局管理器,分别是LinearLayoutManager,GridLayoutManager,StaggeredGridLayoutManager,对应实现单行列表,多行 ...

  8. 使用JS实现图片展示瀑布流效果

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度 ...

  9. WPF下制作的简单瀑布流效果

    最近又在搞点小东西,美化界面的时候发现瀑布流效果比较不错.顺便就搬到了WPF,下面是界面 我对WEB前端不熟,JS和CSS怎么实现的,我没去研究过,这里就说下WPF的实现思路,相当简单. 1.最重要的 ...

随机推荐

  1. SSD-tensorflow-3 重新训练模型（vgg16）

    一.修改pascalvoc_2007.py 生成自己的tfrecord文件后,修改训练数据shape——打开datasets文件夹中的pascalvoc_2007.py文件,根据自己训练数据修改:NU ...

  2. php八大设计模式之简介篇

    设计模式的在面向对象中的重要性?       更深入的理解面向对象的思想,有利于开发出扩展性强的程序.在 PHP 面向对象中有一个 "开闭原则" :"软件实体应当对扩展开 ...

  3. UVA-11134 Fabled Rooks 贪心问题（区间贪心）

    题目链接:https://cn.vjudge.net/problem/UVA-11134 题意 在 n*n 的棋盘上,放上 n 个车(ju).使得这 n 个车互相不攻击,即任意两个车不在同一行.同一列 ...

  4. [NOIP2015提高组]子串

    题目:洛谷P2679.Vijos P1982.codevs4560.UOJ#149. 题目大意:有长度为n的A串和长度为m的B串.现在要从A串中取出k个互不重叠的子串,使它们按顺序相连后得到B串.问有 ...

  5. 去掉vs2010字符串下红色波浪线

    由于在vs集成了qt库,无法提升代码. 所以下载了visual assist,然后新的问题出现了,凡是在vs中输入的字符串,下面都有红色的波浪线,而且没有错误,只是看着不舒服. 解决方法: 在VAss ...

  6. 用typename和template消除歧义

  7. 【LeetCode-面试算法经典-Java实现】【057-Insert Interval（插入区间）】

    [057-Insert Interval(插入区间)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 Given a set of non-overlapping in ...

  8. Qt 5.3 下OpenCV 2.4.11 开发（0）图像处理基本概念

    1.普通情况下的RGB彩色图像:它的每一个像素点都是由三个通道组成,即红色(R).绿色(G)和蓝色(B).8位三通道彩色图像就是每一个像素中每一个通道的取值范围都是 0~255(即二进制下的8位数), ...

  9. Linux异常关机后，Mysql启动出错ERROR 2002 (HY000)

    Linux异常关机后,Mysql启动或訪问时,出错: ERROR 2002 (HY000): Can't connect to local MySQL server through socket '/ ...

  10. JVM调优系列：（四）GC垃圾回收

    跟踪收集算法: 复制(copying): 将堆内分成两个同样空间,从根(ThreadLocal的对象.静态对象)開始訪问每个关联的活跃对象,将空间A的活跃对象所有拷贝到空间B,然后一次性回收整个空间A ...