<!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. angular route 与 django urls 冲突怎么解决？

    app.js var app = angular.module('app', [ 'ngResource', 'ngRoute', // 'ui.bootstrap', // 'ngResource' ...

  2. 6、json支持

    package main import ( "encoding/json" "fmt") // Json 支持 type Response1 struct{ P ...

  3. Linux 下安装 redis 详情

    一:将redis 压缩包上传到 Linux  usr/local下 (一):在local 下创建一个 redis 目录 (二):上传redis压缩包到此目录下. 二:Linux 进入 local目录下 ...

  4. 监控web服务（http，本地 / 远程监控nginx）

    监控 httpd 服务一: #!/bin/bash #描述: 秒级别监控 http 服务 while [ 1 -lt 2 ] do sleep 10 ai=`netstat -ntl | grep & ...

  5. Laravel修炼：服务提供者

    前言   上一篇博客文章收集了关于Laravel服务容器的相关知识(传送门),我们知道了服务容器主要有绑定和解析两个重要功能,那么Laravel这个框架集齐了如此多功能,我们项目可能还需要另外引入一些 ...

  6. 【问题:SSH】win10使用SSH链接服务器时，提示：Host key verification failed

    异常原因:当前连接新建的验证信息与之前保存的验证信息不一致,将原来的验证信息删除就可以了. 1 使用以下命令,清空之前缓存的信息.或者直接打开C:\Users\Nolan\.ssh\known_hos ...

  7. Looger级别

    Logger级别 日志记录器(Logger)是日志处理的核心组件.log4j具有5种正常级别(Level).日志记录器(Logger)的可用级别Level (不包括自定义级别 Level), 以下内容 ...

  8. Linux下查看txt文档

    当我们在使用Window操作系统的时候,可能使用最多的文本格式就是txt了,可是当我们将Window平台下的txt文本文档复制到Linux平台下查看时,发现原来的中文所有变成了乱码. 没错, 引起这个 ...

  9. 【Android实战】Socket消息通信

    这篇博客的内容是基于http://my.oschina.net/fengcunhan/blog/178155进行改造的.所以须要先看完这篇博客,然后再来看以下的内容. 1.须要完毕的功能是直播间的so ...

  10. ssh 免密及加密远程脚本实现

    windows_host文件路径:C:\Windows\System32\drivers\etc ssh-copy-id -i ~/.ssh/id-rsa.pub root@xxxxxxx 免密验证操 ...