<!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. MySQL索引类型及优化

    索引是快速搜索的关键.MySQL索引的建立对于MySQL的高效运行是很重要的.下面介绍几种常见的MySQL索引类型. 在数据库表中,对字段建立索引可以大大提高查询速度.假如我们创建了一个 mytabl ...

  2. 利用ss5服务搭建代理服务器

    利用ss5服务搭建代理服务器 1. 下载ss5-3.8.9-8.tar.gz ###官网下载http://ss5.sourceforge.net/ 2. 安装ss5 yum -y install gc ...

  3. PAT 乙级 1051

    题目 题目地址:PAT 乙级 1051 思路 最近做题发现一个比较明显的现象——总是在做简单题的过程中出现这样那样的小问题,究其原因我认为还是有很多细节性的知识没有掌握,这是在以后的学习过程中需要注意 ...

  4. PHPStorm+XDebug进行调试图文教程

    这篇文章主要为大家详细介绍了PHPStorm+XDebug进行调试图文教程,内容很丰富,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 另外如果你们加载不出图片,另外的地址:转载地址https:// ...

  5. spring IOC注解与xml配置

    转载自:https://blog.csdn.net/u014292162/article/details/52277756 IOC 1小案例 将对象的依赖交给配置文件来配置(配置文件的名字是可以任意的 ...

  6. salt 模板

    http://www.mamicode.com/info-detail-2297406.html

  7. VMware虚拟网卡介绍和使用说明

    介绍VMware三种网络连接模式的详细配置及规则 版权声明:本文为博主原创文章,未经博主允许不得转载. 原文地址: https://www.cnblogs.com/poterliu/p/9455391 ...

  8. HashMap存储原理

    1.    HashMap概述 HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变. ...

  9. LeetCode（232） Implement Queue using Stacks

    题目 Implement the following operations of a queue using stacks. push(x) – Push element x to the back ...

  10. PHP函数参数传递(相对于C++的值传递和引用传递）

    学语言学得比较多了,今天突然想PHP函数传递,对于简单类型(基本变量类型)和复杂类型(类)在函数参数传递时,有没有区别呢,今天测试了下: 代码如下: <?php function test($a ...