1. <!doctype html>
  2.   <html>
  3.   <head>
  4.   <meta charset="UTF-8"/>
  5.   <title>新手教程：CSS+DIV等宽格子堆砌瀑布流效果_酷站代码丨www.5icool.org</title>
  6.   <style>
  7.   *{padding:0;margin:0;}
  8.   #wrap{position:relative;zoom:1;margin:0px auto;}
  9.   #wrap li{width:250px;float:left;list-style:none;}
  10.   .boxCont{position:relative;margin:15px;border:1px solid #ccc;background:#eee;
  11.   background: -webkit-gradient(linear, 0% 20%, 0% 92%, from(#fff), to(#f3f3f3), color-stop(.1,#fff));
  12.   background: -webkit-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  13.   background: -moz-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  14.   background: -o-linear-gradient(0 0 270deg, #f3f3f3, #f3f3f3 10%, #fff);
  15.   -webkit-border-radius: 60px / 5px;
  16.   -moz-border-radius: 60px / 5px;
  17.   border-radius:60px / 5px;
  18.   -webkit-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
  19.   -moz-box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
  20.   box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.1) inset;
  21.   }
  22.   .boxCont:before{
  23.   content:'';
  24.   width: 50px;
  25.   height: 50px;
  26.   top:0; right:0;
  27.   position:absolute;
  28.   display: inline-block;
  29.   z-index:-1;
  30.   -webkit-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  31.   -moz-box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  32.   box-shadow: 10px -10px 8px rgba(0, 0, 0, 0.2);
  33.   -webkit-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  34.   -moz-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  35.   -o-transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  36.   transform: rotate(2deg) translate(-14px,20px) skew(-20deg);
  37.   }
  38.   .boxCont:after{
  39.   content: '';
  40.   width: 100px;
  41.   height: 100px;
  42.   top:0; left:0;
  43.   position:absolute;
  44.   z-index:-1;
  45.   display: inline-block;
  46.   -webkit-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
  47.   -moz-box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
  48.   box-shadow: -10px -10px 10px rgba(0, 0, 0, 0.2);
  49.   -webkit-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  50.   -moz-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  51.   -o-transform: rotate(2deg) translate(20px,25px) skew(20deg);
  52.   transform: rotate(2deg) translate(20px,25px) skew(20deg);
  53.   }
  54.   </style>
  55.   </head>
  56.   <body>
  57.   <ul id="wrap"></ul>
  58.   </body>
  59.   <script type="text/javascript">
  60.   var $id = function(o){ return document.getElementById(o) || o};
  61.   function sort(el){
  62.   var h = [];
  63.   var box = el.getElementsByTagName("li");
  64.   var minH = box[0].offsetHeight,
  65.   boxW = box[0].offsetWidth,
  66.   boxH,
  67.   n = document.documentElement.offsetWidth / boxW | 0; //计算页面能排下多少Pin
  68.   el.style.width = n * boxW + "px";
  69.   for(var i = 0; i < box.length; i++) {
  70.   boxh = box[i].offsetHeight; //获取每个Pin的高度
  71.   if(i < n) { //第一行Pin以浮动排列，不需绝对定位
  72.   h[i] = boxh;
  73.   box[i].style.position = '';
  74.   } else {
  75.   minH = Math.min.apply({},h); //取得各列累计高度最低的一列
  76.   minKey = getarraykey(h, minH);
  77.   h[minKey] += boxh ; //加上新高度后更新高度值
  78.   box[i].style.position = 'absolute';
  79.   box[i].style.top = minH + 'px';
  80.   box[i].style.left = (minKey * boxW) + 'px';
  81.   }
  82.   }
  83.   };
  84.   /* 返回数组中某一值的对应项数 */
  85.   function getarraykey(s, v) {
  86.   for(k in s) {
  87.   if(s[k] == v) {
  88.   return k;
  89.   }
  90.   }
  91.   };
  92.   /* 随机创建Pin */
  93.   var pin = '';
  94.   for(i = 0; i < 30; i++) {
  95.   height = Math.floor(Math.random()*200 + 200);
  96.   pin += '<li><div class="boxCont" style="height:' + height + 'px;"></div></li>';
  97.   };
  98.   $id("wrap").innerHTML = pin;
  99.   window.onload = window.onresize = function() {
  100.   sort($id("wrap"));
  101.   };
  102.   </script>
  103.   </html>

css基础之 图片瀑布流布局：用CSS+DIV等宽格子堆砌瀑布流效果 （一）的更多相关文章

  1. CSS基础选择器(选择器的优先级)，CSS样式块( 长度/颜色/显示方式/文本样式),盒模型组成，盒模型-block，盒模型布局

    CSS基础选择器 (1)id选择器:   #       =>  标签拥有 id="user"  属性 <style> #user { width: 200px; ...

  2. css怎么让图片垂直左右居中?(外层div是浮动且按照百分比排列)

    一.原始的居中方法是把div换成table <div style="width: 500px; height: 200px; border: solid 1px red; text-a ...

  3. CSS 基础 例子 图片拼合技术

    利用background-position xpos ypos 就是以图片的左上角顶点为原点,往下和右都为正,反之为负,移动图片 如: background-position: 15px 20px;( ...

  4. CSS基础 背景图片的相关属性

    属性名: background-size: 宽度 高度; 属性值 说明 数字+px 简单方便,常用 百分比 相当于盒子自身的百分比,如:百分百,就是就算是图片变形也要显示 contain 动比例缩放, ...

  5. css基础语法一（选择器与css导入方式）

    页面中,所有的CSS代码,需要写入到<style></style>标签中.style标签的type属性应该选择text/css,但是type属性可以省略. CSS修改页面中的所 ...

  6. CSS基础【1】：体验CSS

    CSS起源 web的衰落:在 web 早期(1990-1993),html是一个很局限的语言.几乎完全由用于描述段落,超链接,列表和标题的结构化元素组成.随着万维网的出现(用户交互体验的加强),对 h ...

  7. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

  8. 开始编写寄几的 CSS 基础库

    前言 在现在的互联网业务中,前端开发人员往往需要支持比较多的项目数量.很多公司只有 1-2 名前端开发人员,这其中还不乏规模比较大的公司.这时前端同学就需要独挡一面支持整个公司上下的前端业务,项目如流 ...

  9. CSS基础-行快属性，hover

    CSS基础 1.行快属性 在css中有很多标签,分为行内标签,块标签,标签行内块标签,他们有着不同的属性.     块标签         div,ul,li,ol,h1~h6,p         可 ...

随机推荐

  1. hdu1597

    Problem Description 假设: S1 = 1 S2 = 12 S3 = 123 S4 = 1234 ......... S9 = 123456789 S10 = 1234567891 ...

  2. eclipse中配置免安装tomcat7

    参看如下链接:http://hi.baidu.com/gpy11/item/744c13e14614c9b52e140b25

  3. 解决jQuery中dbclick事件触发两次click事件

    首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbc ...

  4. WPF/MVVM 快速开发

    http://www.codeproject.com/Articles/165368/WPF-MVVM-Quick-Start-Tutorial 这篇文章醍醐灌顶,入门良药啊! Introductio ...

  5. x位全排列（next_permutation）

    擅长排列的小明 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 小明十分聪明,而且十分擅长排列计算.比如给小明一个数字5,他能立刻给出1-5按字典序的全排列,如果你想 ...

  6. MVC4商城项目四：应用Bundle捆绑压缩技术

    从MVC4开始,我们就发现,项目中对Global.asax进行了优化,将原来在MVC3中使用的代码移到了[App_Start]文件夹下,而Global.asax只负责初始化.其中的BundleConf ...

  7. HTML基本标签大全

    HTML标签 <h#></h#>标题标签<hr/>水平线,单标记<p></p>段落标签&nbsp 空格<i></i ...

  8. Qt Project的持续集成方案

    作者:齐亮链接:http://www.zhihu.com/question/24314354/answer/27547787来源:知乎著作权归作者所有,转载请联系作者获得授权. PETER HARTM ...

  9. Asp.net Web.Config - 配置元素customErrors

    Asp.net配置文件的配置方式,其实在MSDN里面是写得最清楚的了.可惜之前一直未曾了解到MSDN的强大. 先贴个地址:http://msdn.microsoft.com/zh-cn/library ...

  10. Redis Clients Handling

    This document provides information about how Redis handles clients from the point of view of the net ...