<!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. (2) html 语义化

    HTML语义化标签 1 什么是语义化标签? 通过标签判断内容语义,例如根据h1标签判断出内容是标题,根据 p 判断内容是段落.input 标签是输入框等. 2 为什么要标签语义化? 1.搜素引擎友好 ...

  2. JS数据结构及算法（一） 堆栈

    最近在看<学习JavaScript数据结构与算法>这本书,感觉自己又涨知识了 哈哈... 现在将自己看的做个总结,也是巩固理解. 栈:先进后出,新添加和待删除的元素都保存在栈顶.可以用数组 ...

  3. [bzoj]3436 小K的农场

    [题目描述] 小K在MC里面建立很多很多的农场,总共n个,以至于他自己都忘记了每个农场中种植作物的具体数量了,他只记得一些含糊的信息(共m个),以下列三种形式描述:农场a比农场b至少多种植了c个单位的 ...

  4. 【交互 细节题 思维题】cf1064E. Dwarves, Hats and Extrasensory Abilities

    第一次做交互真有趣……:挺好的细节思维题 This is an interactive problem. In good old times dwarves tried to develop extr ...

  5. Python + Bottle + 谷歌搜索Api 实现简单搜索引擎

    1.运行环境 python3 centos7 2.Bottle的使用 使用bottle主要是因为它仅用python自带的库即可实现对web的搭建. bottle源码分析 bottle使用教程 3.代码 ...

  6. javascript实现原生ajax的几种方法介绍

    自从javascript有了各种框架之后,比如jquery,使用ajax已经变的相当简单了.但有时候为了追求简洁,可能项目中不需要加载jquery这种庞大的js插件.但又要使用到ajax这种功能该如何 ...

  7. java web项目(spring项目)中集成webservice ,实现对外开放接口

    什么是WebService?webService小示例 点此了解 下面进入正题: Javaweb项目(spring项目)中集成webservice ,实现对外开放接口步骤: 准备: 采用与spring ...

  8. LeetCode（122） Best Time to Buy and Sell Stock II

    题目 Say you have an array for which the ith element is the price of a given stock on day i. Design an ...

  9. 原来针对新唐mcu，keil有免费许可

    MDK for Nuvoton Cortex-M0/M23:The MDK for Nuvoton Cortex-M0/M23 is a license paid by Nuvoton. It is  ...

  10. re--findall 【转】

    原文链接 python re 模块 findall 函数用法简述 代码示例: >>> import re >>> s = "adfad asdfasdf ...