<!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. matplotlib绘图(四)

    控制文字属性的方法: 所有的方法都会返回一个matplotlib.text.Text对象  文本注释: annnotate() xy参数设置箭头指示的位置,xytext参数设置注释文字的位置 arro ...

  2. 【Git版本控制】git中reset命令的详解

    git reset 命令详解(一) git reset 命令详解(二) reset命令的语法:git reset [选项]  [版本号]  [要回退的目标] 选项:--soft仅将head指针指向历史 ...

  3. Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery)

    Golang 谷歌搜索api 实现搜索引擎(前端 bootstrap + jquery) 体验 冒号搜索 1. 获取谷歌搜索api 谷歌搜索api教程 2. 后台调用 程序入口 main.go // ...

  4. LeetCode_6

    问题: 6. Z字形变换 链接:https://leetcode-cn.com/problems/zigzag-conversion/description/ 分析: A 仿真方法 直接模拟整个过程, ...

  5. Java中将字符串与unicode的相互转换工具类

    unicode编码规则 unicode码对每一个字符用4位16进制数表示.具体规则是:将一个字符(char)的高8位与低8位分别取出,转化为16进制数,如果转化的16进制数的长度不足2位,则在其后补0 ...

  6. 【python学习】新手基础程序练习（一）

    首先得先编一下程序员必须编的程序——Hello World……(这应该是程序员情结...) #coding=utf-8 #Version:python3.7.0 #Tools:Pycharm 2017 ...

  7. php三种方式操作mysql数据库

    php可以通过三种方式操作数据库,分别用mysql扩展库,mysqli扩展库,和mysqli的预处理模式分别举案例加以说明 1.通过mysql方式操作数据库 工具类核心代码: <?php cla ...

  8. UVa 10118 记忆化搜索 Free Candies

    假设在当前状态我们第i堆糖果分别取了cnt[i]个,那么篮子里以及口袋里糖果的个数都是可以确定下来的. 所以就可以使用记忆化搜索. #include <cstdio> #include & ...

  9. MySQL主从复制(Master-Slave)

    MySQL数据库自身提供的主从复制功能可以方便的实现数据的多处自动备份,实现数据库的拓展.多个数据备份不仅可以加强数据的安全性,通过实现读写分离还能进一步提升数据库的负载性能. 下图就描述了一个多个数 ...

  10. 什么是Maven?

    Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具. 发文时,绝大多数开发人员都把 Ant 当作 Java 编程项目的标准构建工具.遗憾的是, ...