<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .pin{

            padding: 15px 0 0 15px;position: absolute;

            }

        .box{

            padding: 10px;

            border:1px solid #ccc;}

        .box img{

            width:100px;

            height:auto;}

    </style>

    <script src="jquery.js"></script>

</head>

<body>

<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/44.png"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="img/44.png"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="img/44.png"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="img/4.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/44.png"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

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

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="img/44.png"/>

        </div>

    </div>

    <div class="pin">

        <div class="box">

            <img src="img/4.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/nav60.png"/>

    </div>

</div>   <div class="pin">

    <div class="box">

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

    </div>

</div>   <div class="pin">

    <div class="box">

        <img src="img/mazha.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/nav60.png"/>

    </div>

</div>   <div class="pin">

    <div class="box">

        <img src="img/22.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/33.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/nav60.png"/>

    </div>

</div>   <div class="pin">

    <div class="box">

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

    </div>

</div>

    <div>

 <script>

     window.onload=function(){

         var screenWidth=$(window).width();

         console.log("屏幕宽度："+screenWidth);

         var cloumnNum= Math.floor(screenWidth/($('.pin').width())) ;

         console.log(cloumnNum)

         var  cloumnHeight=[];

         for(var i=0;i<cloumnNum;i++){

             cloumnHeight.push(0)

         }

         console.log(cloumnHeight)

         $("#main .pin").each(function(index){

            var elementHeight=$(this).height();

             var elementWidth=$(this).width();

             console.log(index%(cloumnHeight.length))

            $(this).css("left",(index%(cloumnHeight.length))*elementWidth).css("top",(cloumnHeight[index%(cloumnHeight.length)]))

             cloumnHeight[index%(cloumnHeight.length)]+=elementHeight;

             console.log(cloumnHeight)

         })

     }

 </script>

</body>

</html>

　　

用jquery写的position瀑布流布局的更多相关文章

  1. 使用jquery+css实现瀑布流布局

    虽然可以直接使用css实现瀑布流布局,但显示的方式有点问题,所以这儿就直接使用jquery+css来实现瀑布流布局,最终效果如下:      思路是通过将每个小块的position设置为relativ ...

  2. jQuery Wookmark Load 瀑布流布局实例演示

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

  3. jQuery Wookmark 瀑布流布局

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸统一的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 版本: jQuery v1.4.3+ jQuery Wookmark Load v1 ...

  4. Jquery瀑布流布局

    瀑布流布局最近真的很流行,很多人都跟我一样想知道是怎么做出来的吧,经过网上搜索大量的参考结合N边的实验今天终于被我写出来了,为了便于大家理解我使用了jQuery(当然用源生js代码执行的效率会高一些, ...

  5. jquery实现简单瀑布流布局（续）：图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

  6. jquery实现简单瀑布流布局

    jquery实现简单瀑布流布局 是开头都会说的原理 瀑布流布局有两种,一种是固定列,一种是非固定列.在此主要记述第一种的实现. 固定列的特征是:无论页面如何缩放,每行的总列数都一致. 一行4列的瀑布流 ...

  7. Jquery瀑布流布局，jQuery Wookmark Load 示例

    瀑布流布局非常适合大量图片的展示,一改过去裁剪图片尺寸同意的排版,每张图片都能完全展示,并错落有致,让人眼前一亮. 注意事项:img元素的width和weight属性需要写,否则定位会不准确. 查看j ...

  8. Ajax+json+jquery实现无限瀑布流布局

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. AJAX+json+jquery实现预加载瀑布流布局

    宽度是一定的高度不定的瀑布流布局 也可以说是无缝拼图 当浏览器滚动到底部时候自动加载图片 加载的图片地址用json 在img.js里 ,还有正在加载动画是用 css3制作的 在ff等支持css3可以显 ...

随机推荐

  1. IDEA设置每次打开重新选择项目

    通过这里,选择settings,或者进入之后的FILE->settings.搜索System 即可出现

  2. ARC中__weak;__strong;__unsafe_unretained;修饰词

    测试代码: // Human.h代码 @interface Human : NSObject @property (nonatomic, weak) Cat *pinkCat; @property ( ...

  3. http客户端与浏览器的区别

    两者区别:浏览器对http响应头会进行特定处理(如自动读取本地缓存.设置cookie等),而http客户端(如crul)可能没有像浏览器那样的处理,某些封装程度高的http客户端,可能会有. 同一个文 ...

  4. PHP CURL错误: error:140943FC

    使用PHP访问https网站的时候,间歇性会报error:140943FC错误.google之,通过如下方案可处理: 1.服务器ssl版本较高 curl_setopt($this->curl, ...

  5. Manjaro 添加国内源和安装搜狗输入法

    Manjaro 系统虽然比 Ubuntu 用着稳定,但有些小地方没有 Ubuntu 人性化,比如默认安装完的系统貌似没有中国的,Ubuntu 估计是用的人多,所以安装完后会根据所在地给你配置更新的源. ...

  6. Python学习笔记：py2exe打包Python程序

    使用py2exe将一个Python程序打包成一个exe程序,这样Python程序也可以在没有安装Python的环境中运行Python程序了.使用这个工具需要写一个用于打包的setup.py文件(名称可 ...

  7. freertos知识点笔记——队列、二值信号量、计数信号量

    队列1.队列queue通常用于任务之间的通信,一个任务写缓存,另一个任务读缓存.队列还会有等待时间,2.阻塞超时时间.如果在发送时队列已满,这个时间即是任务处于阻塞态等待队列空间有效的最长等待时间.如 ...

  8. 杭电 1155 Bungee Jumping（物理题）

    Problem Description Once again, James Bond is fleeing from some evil people who want to see him dead ...

  9. 水题：51Nod 1163-最高的奖励

    最高的奖励 基准时间限制:1 秒 空间限制:131072 KB 分值: 20 难度:3级算法题 Description 有N个任务,每个任务有一个最晚结束时间以及一个对应的奖励.在结束时间之前完成该任 ...

  10. JavaSE——Java对象导论

    一.抽象过程 人们所能够解决问题的复杂性直接取决于抽象的类型和质量.所谓抽象的类型指的是抽象的是什么,汇编语言是对底层机器的轻微抽象,命令式语言(FORTRAN.BASIC.C)是对汇编语言的抽象.这 ...