//保证img文件夹下有图片
//引入jquery 
<script src="Script/jquery-1.7.2.js"></script>

<style>

        * {

            padding: 0;

            margin: 0;

        }

        #main {

            position: relative;

        }

        .pin {

            padding: 10px 0 0 10px;

            float: left;

        }

        .box {

            padding: 10px;

            border: 1px solid #ccc;

            box-shadow: 0 0 6px #ccc;

            border-radius: 5px;

            height:90%;

        }

            .box img {

                width: 162px;

                height: auto;

            }

    </style>

<body>

    <form id="form1" runat="server">

        <div id="main">

            <div class="pin">

                <div class="box">

                    <img src="img/1.jpg" />

                </div>

            </div>

            <div class="pin">

                <div class="box">

                    <img src="img/2.jpg" />

                </div>

            </div>

            <div class="pin">

                <div class="box">

                    <img src="img/3.jpg" />

                </div>

            </div>

            <div class="pin">

                <div class="box">

                    <img src="img/4.jpg" />

                </div>

            </div>

            <div class="pin">

                <div class="box">

                    <img src="img/5.jpg" />

                </div>

            </div>

            <div class="pin">

                <div class="box">

                    <img src="img/6.jpg" />

                </div>

            </div>

            <div class="pin">

                <div class="box">

                    <img src="img/7.jpg" />

                </div>

            </div>

            <div class="pin">

                <div class="box">

                    <img src="img/8.jpg" />

                </div>

            </div>

        </div>

    </form>

</body>

////////////js

<script>

    window.onload = function () {

        waterfall();//加载时成瀑布流效果

        var imgss = { "data": [{ "src": "img/1.jpg" }, { "src": "img/2.jpg" }, { "src": "img/3.jpg" }, { "src": "img/4.jpg" }, { "src": "img/5.jpg" }, ] };

        $(window).on("scroll", function () {

            if (fun_scroll()) {

                for (var i = 0; i < imgss.data.length; i++) {

                    var div_pin = $("<div>").addClass("pin");

                    var div_box = $("<div>").addClass("box");

                    div_box.appendTo(div_pin);

                    var img = $("<img>").attr("src", imgss.data[i].src);

                    img.appendTo(div_box);

                    div_pin.appendTo($("#main"));

                    waterfall();

                }

            }

        });

    }

    //设置瀑布流

    function waterfall() {

        ////获取单个宽度

        /////////////$(".pin").width();//只获取元素的真实宽度

        /////////////document.getElementById("id")offsetWidth;//获取元素加上外间距的宽度

        var objWidth = $(".pin:eq(0)").get(0).offsetWidth;//.width();

        ////获取每行个数document.documentElement.clientWidth

        var num = Math.floor($(document).width() / objWidth);

        $("#main").css({ "width": (objWidth * num) + "px", "margin": "0 auto" });

        var heigs = [];

        $(".pin").each(function (i, obj) {

            if (i < num) {

                heigs.push($(obj).get(0).offsetHeight);

            } else {

                //获取最小的值

                var mixh = Math.min.apply(null, heigs);

                //获取值的索引

                var inx = $.inArray(mixh, heigs, null);

                $(obj).css({

                    "position": "absolute",

                    "top": mixh,

                    "left": $(".pin").eq(inx).position().left,

                });

                heigs[inx] += $(obj).get(0).offsetHeight;

            }

        });

    }

    //滚动，滚动条时动态加载图片

    var fun_scroll = function () {

        //最后一个元素距离顶部的高度+自身一半高度

        var lastObjHeight = Math.floor($(".pin").last().offset().top) + Math.floor($(".pin").last().height() / 2);

        //卷进去的高度

        var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;

        //屏幕的高度

        var deviceheight = document.documentElement.clientHeight;

        return ((deviceheight + scrollHeight) > lastObjHeight) ? true : false;

    }

</script>



												


											
Jquery 实现瀑布流布局的更多相关文章
	

    
						
  1. jQuery Wookmark 瀑布流布局
		
    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
    
		
    2. 
								
  2. jQuery模拟瀑布流布局
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    3. 
						
  3. jQuery实现瀑布流布局详解（PC和移动端）
		
    首先我们将如下样式的若干个单元写进body中,并将“box”向左浮动: <div class="box">  <img class="img" ...
    
		
    4. 
						
  4. jQuery实现瀑布流布局
		
    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
    
		
    5. 
						
  5. JS 瀑布流布局
		
    瀑布流布局 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
    
		
    6. 
						
  6. myWaterfall - jQuery瀑布流布局插件
		
    myWaterfall - jQuery瀑布流布局插件 Demo http://jsfiddle.net/q3011893/p5k2ogy8/embedded/result,html,css,js/  ...
    
		
    7. 
						
  7. jquery实现简单瀑布流布局（续）：图片懒加载
		
    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...
    
		
    8. 
						
  8. jquery实现简单瀑布流布局
		
    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...
    
		
    9. 
						
  9. jQuery Wookmark Load 瀑布流布局实例演示
		
    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. POJ 1179 IOI1998 Polygon
			
    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 5472   Accepted: 2334 Description Polyg ...
    
			
    2. 
						
  2. .NET程序集（Assembly）
			
    在.NET 中,新引入了一个程序集的概念,就是指经由编译器编译得到的,供CLR进一步编译执行的那个中间产物,在WINDOWS系统中,它一般表现为.dll,或者是.exe的格式,但是要注意,它们跟普通意 ...
    
			
    3. 
						
  3. 解决linux redhat6下安装git的问题
			
    今天用到linux上的git安装过程比较曲折,记录一下: 首先会报需要perl rpm -ivh git-1.7.1-14.2.x86_64.rpm warning: git-1.7.1-14.2.x ...
    
			
    4. 
						
  4. Windows性能计数器--磁盘性能分析Disk
			
    Physical Disk: 单次IO大小 Avg.Disk Bytes/Read Avg.Disk Bytes/Write IO响应时间 Avg.Disk sec/Read Avg.Disk sec ...
    
			
    5. 
						
  5. STM32 驱动12864液晶显示汉字、图片、画点、横线、竖线、斜线
			
    我做本实验的软件平台为MDK软件,选用STM32VET6,12864液晶屏5v供电采用并行接法.之前本来想网上找一个现成的程序实验一下,但都没找到合适的,于是就自己编写了一个,最终可在12864液晶屏 ...
    
			
    6. 
						
  6. iOS设计模式之生成器
			
    iOS设计模式之生成器 1.生成器模式的定义 (1): 将一个复杂的对象的构件与它的表示分离,使得相同的构建过程能够创建不同的表示 (2): 生成器模式除了客户之外还包括一个Director(指导者) ...
    
			
    7. 
						
  7. web项目设计与开发——DBHelper
			
    学习web项目设计与开发主要是在上学期web程序开发的基础上添上了思想和更深的理解. 在学习之前,我们需要下载好相关的软件——MyEclipse以及配置文件JDK.tomcat.再添加除MyEclip ...
    
			
    8. 
						
  8. 利用jquery.form实现异步上传文件
			
    实现原理 目前需要在一个页面实现多个地方调用上传控件上传文件,并且必须是异步上传.思考半天,想到通过创建动态表单包裹上传文件域,利用jquery.form实现异步提交表单,从而达到异步上传的目的,在上 ...
    
			
    9. 
						
  9. 别了 oi——一篇高三狗的滚粗遗言
			
    /* 开始于2015年12月 结束于2016年11月 一年的oi生涯有很多值得怀念的事 还记得去年旺哥找我学oi 当时是一脸的蒙逼 要知道 高二才开始搞是很晚了 然而 也就是那一晚之后 许多事情都变了 ...
    
			
    10. 
						
  10. Nuget 自动上传
			
    1:参考https://newnugetpackage.codeplex.com/wikipage?title=NuGet%20Package%20To%20Create%20A%20NuGet%20 ...
    
			
    11.