<!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. Bootstrap历练实例：面板的标题

    面板标题 我们可以通过以下两种方式来添加面板标题: 使用 .panel-heading class 可以很简单地向面板添加标题容器.to easily add a heading container ...

  2. Java面向对象基础 ——面试题

    1面向对象基础 JAVA基础语法自行掌握. 三大特性: 一 封装:★★★★★ 概念:是指隐藏对象的属性和实现细节,仅对外提供公共访问方式. 好处:将变化隔离:便于使用:提高重用性:安全性. 封装原则: ...

  3. Android驱动开发读书笔记五

    第五章 本章介绍了S3C6410开发板的功能,开发板的不同主要是在烧录嵌入式系统的方式不同,以及如何在此开发板上安装Android. 1.安装串口调试工具minicom 首先需要一根USB转串口线,由 ...

  4. LeetCode945-使数组唯一的最小增量

    问题:使数组唯一的最小增量 给定整数数组 A,每次 move 操作将会选择任意 A[i],并将其递增 1. 返回使 A 中的每个值都是唯一的最少操作次数. 示例 1: 输入:[1,2,2] 输出:1 ...

  5. 图解Disruptor框架（一）：初识Ringbuffer

    图解Disruptor框架(一):初识Ringbuffer 概述 1. 什么是Disruptor?为什么是Disruptor? Disruptor是一个性能十分强悍的无锁高并发框架.在JUC并发包中, ...

  6. python数据类型之元组(tuple)

    元组是python的基础类型之一,是有序的. 元组是不可变的,一旦创建便不能再修改,所以叫只读列表. name = ('alex', 'jack') name[0] = 'mark' # TypeEr ...

  7. LeetCode（205）Isomorphic Strings

    题目 Given two strings s and t, determine if they are isomorphic. Two strings are isomorphic if the ch ...

  8. Divisibility by 25 CodeForces - 988E

    You are given an integer nn from 11 to 10181018 without leading zeroes. In one move you can swap any ...

  9. 使用docker+tomcat部署jenkins

  10. LA 4253 Archery 二分

    题意: x轴上方有若干条平行于x轴的线段 在x轴的区间\([0, \, W]\)内找一点发射一条射线,使其穿过所有线段. 问是否存在这样的点. 分析: 我们二分射线端点的坐标,将线段按纵坐标从小到大排 ...