<!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. PostgreSQL Replication之第九章 与pgpool一起工作（5）

    9.5 检查复制 如果所有的节点都处于开机并运行的状态.我们就可以在集群上运行我们的第一个操作了.在我们的例子中,我们将简单地连接到pgpool并创建一个新的数据库.createdb 是一个命令行工具 ...

  2. 《剑指offer》二进制中1的个数

    一.题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 二.牛客网提供的框架 class Solution { public: int NumberOf1(int n) { } ...

  3. OpenGL编程（四）改变窗口大小时保持图形的原形

    前面的例子,当我们通过拖拉的方法改变窗口的长宽比例时,窗口里的图形的长宽也相应地伸缩,导致图形变形.如下图: 正如上图所示,当我们把窗口宽度拉长后,图形就会显得比较胖.同样,当我们把窗口的高度拉长后, ...

  4. C＃线程安全打开/保存文件对话框

    在多线程单元模式(MTA)中为应用程序使用.NET OpenFileDialog和SaveFileDialog 下载FileDialogsThreadAppartmentSafe_v1.zip 如果您 ...

  5. Linux FTP客户端

    1.File Zilla File Zilla是一个开源的,跨平台的Linux FTP客户端.File Zilla有一个标签式的用户界面,允许用户查看正在传输的文件的所有细节.File Zilla是通 ...

  6. nginx配置虚拟域名

           /usr/lcoal/nginx/conf/nginx.conf 配置详解如下: worker_processes   1;                                ...

  7. centOS7下 安装nodejs+nginx+mongodb+pm2部署vue项目

    一.购买服务器并远程连接 1.购买服务器和域名 可以选择阿里云或者是其他的厂商的服务器.然后会获得服务器ip地址,用户名和密码. 购买域名,将域名绑定到ip地址上. 2.下载xshell,winscp ...

  8. 洛谷3857 [TJOI2008]彩灯

    题目描述 已知一组彩灯是由一排N个独立的灯泡构成的,并且有M个开关控制它们.从数学的角度看,这一排彩灯的任何一个彩灯只有亮与不亮两个状态,所以共有2N个样式.由于技术上的问题,Peter设计的每个开关 ...

  9. POJ-2393 Yogurt factory 贪心问题

    题目链接:https://cn.vjudge.net/problem/POJ-2393 题意 有一个生产酸奶的工厂,还有一个酸奶放在其中不会坏的储存室 每一单元酸奶存放价格为每周s元,在接下来的N周时 ...

  10. linux6 安装oracle11g

    转自:http://blog.csdn.net/nhm_lxy/article/details/37813789 安装环境:    虚拟机VMware Workstation 10.0 操作系统:   ...