<!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. 自动关闭Messbox

    /// <summary> /// 自动关闭Messbox /// </summary> public class MessageBoxAutoClose { System.T ...

  2. Map<String,String>转换json字符串

    import java.util.HashMap; import java.util.Map; import net.sf.json.JSONObject; public class testJson ...

  3. SSD-实现

    一.制作voc数据集 1.数据集文件夹 新建一个文件夹,用来存放整个数据集,或者和voc2007一样的名字:VOC2007 然后像voc2007一样,在文件夹里面新建如下文件夹: 2.将训练图片放到J ...

  4. NodeJS学习笔记 (21)事件机制-events(ok)

    模块概览 events模块是node的核心模块之一,几乎所有常用的node模块都继承了events模块,比如http.fs等. 模块本身非常简单,API虽然也不少,但常用的就那么几个,这里举几个简单例 ...

  5. [译] 我最终是怎么玩转了 Vue 的作用域插槽

    原文链接:https://juejin.im/post/5c8856e6e51d456b30397f31#comment 原文地址:How I finally got my head around S ...

  6. docker操作大全

    docker 常用操作方法 查看docker版本docker version 搜索镜像docker serach 镜像名称 拉去镜像docker pull 镜像名称 查看本地镜像仓库信息docker ...

  7. Object-C,循环语句for,while,do-while

    演示循环语句,for,while,do-while,和C系列的语言,语法基本一致1到10,求和 // // main.m // for-while // // Created by fansunion ...

  8. Java基础学习总结（9）——this关键字

    一.this关键字 this是一个引用,它指向自身的这个对象. 看内存分析图: 假设我们在堆内存new了一个对象,在这个对象里面你想象着他有一个引用this,this指向这个对象自己,所以这就是thi ...

  9. COGS——T 21. [HAOI2005] 希望小学

    http://www.cogs.pro/cogs/problem/problem.php?pid=21 ★★   输入文件:hopeschool.in   输出文件:hopeschool.out    ...

  10. 洛谷—— P2934 [USACO09JAN]安全出行Safe Travel || COGS ——279|| BZOJ——1576

    https://www.luogu.org/problem/show?pid=2934 题目描述 Gremlins have infested the farm. These nasty, ugly ...