<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nav-head</title>
	<style>
		*{
			margin:0;
			padding:0;
		}
		.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}
        .pull-list{
        	padding:5px;
        	font-size:0;
        	position:relative;
        }
        .pull-list .pull-box{
        	display:inline-block;
        	float:left;
        }
        .pboder{
        	border:1px solid #ccc;
        	padding:5px;
        	margin:5px;
        	font-size:12px;
        }
        img{
        	width:140px;
        }
	</style>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
	<div class="pull-list clearfix">
		<div class="pull-box">
			<div class="pboder">
			<img src="data:image/1.jpg">

			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="data:image/2.jpg">

			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="data:image/3.jpg">

			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="data:image/4.jpg">
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="data:image/4.jpg">
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="data:image/5.jpg">
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="data:image/6.jpg">
			</div>
		</div>
		<div class="pull-box">
			<div class="pboder">
			<img src="data:image/7.jpg">
			</div>
		</div>
	    <div class="pull-box">
			<div class="pboder">
			<img src="data:image/8.jpg">
			</div>
		</div>
	    <div class="pull-box">
			<div class="pboder">
			<img src="data:image/9.jpg">
			</div>
		</div>
	    <div class="pull-box">
			<div class="pboder">
			<img src="data:image/10.jpg">
			</div>
		</div>

	</div>
    <script src="jquery.min.js"></script>
	<script>
	  $(window).on("load",function(){
	  	function getSlist(){
	  		  var docW = $(window).width(),
	  		      boxW = $('.pull-box').eq(0).outerWidth(),
	  		      boxL = Math.floor(docW/boxW);
	  		      $(".pull-list").css({
	  		      	  "margin":"0 auto",
	  		      	  "width":boxW*boxL
	  		      })
	  		  var arrBox = [];
	  		      $('.pull-box').each(function(key,val){
	  		      	    var boxH = $(val).outerHeight();
	  		      	    if(key<boxL){
	  		      	       arrBox[key] = boxH;
	  		      	    }else{
	  		      	    	var minH = Math.min.apply(null,arrBox);
	  		      	    	var minIndex =$.inArray(minH,arrBox);
	  		      	    	$(val).css({
	  		      	    		"position":"absolute",
	  		      	    		"left":(minIndex*boxW+5)+"px",
	  		      	    		"top":(minH+5)+"px"
	  		      	    	})
	  		      	        arrBox[minIndex] += $('.pull-box').eq(key).outerHeight();
	  		      	    }

	  		      })
	  	}
	  	getSlist();

        function checkScroll(){
       	   	   $(window).scroll(function(){
       	   	  	  if($(document).height() < $(window).height() + parseInt($(window).scrollTop(),10) + 50){
       	   	  	        $.ajax({
       	   	  	        	url:"text.json",
       	   	  	        	method:"GET",
       	   	  	        	success:function(data){
       	                    	var res = data.list;
       	                       var str = "";
       	                    	for(var i=0; i<res.length; i++){
       	                    		str ='<div class="pull-box">'+
       	                    		'			<div class="pboder">'+
       	                    		'			<img src="data:image/'+res[i]+'">'+
       	                    		'			</div>'+
       	                    		'		</div>';
       	                    		$(".pull-list").append(str);
       	                    	}
       	                       getSlist();
       	   	  	        	},
       	   	  	        	error:function(data){
       	   	  	        		console.log(data)
       	   	  	        	}
       	   	  	        })
       	   	  	  }
       	   	    });
        }
       checkScroll();

	    $(window).resize(function() {
             checkScroll();
	   	})

	  })

	</script>
</body>
</html>

　　

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

　　

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. java高效判断素数

    java高效判断素数 package solution; public class Prime { // 偶数可以由有两个素数相加得到, 一个偶数可能有多个这样的两个素数, 请寻找到 这样两个素数,让 ...

  2. luogu P3157 [CQOI2011]动态逆序对（CDQ分治）

    题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...

  3. Vue+ElementUI: 手把手教你做一个audio组件

    目的 本项目的目的是教你如何实现一个简单的音乐播放器(这并不难) 本项目并不是一个可以用于生产环境的element播放器,所以并没有考虑太多的兼容性问题 本项目不是ElementUI的一个音频插件,只 ...

  4. 今日SGU 5.29

    sgu 299 题意:给你n个线段,然后问你能不能选出其中三个组成一个三角形,数字很大 收获:另一个大整数模板 那么考虑下为什么如果连续三个不可以的话,一定是不存在呢? 连续上个不合法的话,一定是 a ...

  5. Varnish 缓存加速， Varnish 菜鸟看过来，Varnish实战

    Varnish可以有效降低web服务器的负载,提升访问速度.按照HTTP协议的处理过程,web服务器接受请求并且返回处理结果,理想情况下服务器要在不做额外处理的情况下,立即返回结果,但实际情况并非如此 ...

  6. Spring-statemachine fork一个region后不能进入join状态的问题

    Spring-statemachine版本:当前最新的1.2.3.RELEASE版本 发现fork多个Region时,子状态全部完成后能够进入join状态.但是如果fork一个Region时Regio ...

  7. C语言typedef struct具体解释

    在C中定义一个结构体要用typedef,如: typedef struct Student { int a; }Stu; 于是在声明变量的时候就能够:Stu stu1;(假设没有typedef就必须用 ...

  8. 受不了Android SDK文档打开缓慢问题，自己开发简易脱机浏览器。

    google android sdk离线文档打开的时候特别慢,据说是要从谷歌官网拉取一些东西导致的.脱机浏览能够解决该问题.PC端能够使用firefox. 可是Android端貌似没有支持脱机工作的浏 ...

  9. android 2048游戏实现

    android 的2048小游戏完整实现:GridLayout布局(android 4.0及以上). 曾经做过一个2048的算法题,学了几天android,认为能够实现个安卓版的.也就动手写了个. 包 ...

  10. 面对即将终止支持的server你还能做些什么

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXF1c2hp/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/d ...