响应式与瀑布流

<style>
body {overflow-y:scroll;}
#wall {
  position:relative;
  overflow:hidden;
  background:#FAFAFA;
  text-align:justify;
  font-size:0px;
  padding:0px;
}
#wall>li {
  position:absolute;
  display:inline-block;
  overflow:hidden;
  color:#333;
  background:#F5F5F5;
  border:1px solid #CCC;
  padding:8px;
  margin:5px;
  text-align:center;
  font:14px/1 Simsun;
  text-decoration:none;
  transition:all 1000ms ease;
}
#wall>li img {
  border:none;
  background:#EEE;
  display:block;
  margin-bottom:8px;
  width:100%;
}
</style>
<ul id="wall"></ul>
<script>
//生成随机项
(function(){
  for(var i=0;i<100;i++){
    var li=document.createElement("li");
    //随机图片尺寸
    li.w=Math.random()*300+300|0;
    li.h=Math.random()*200+200|0;
    //宽度增量只按会缩放的图片来计算
    li.k=li.w/li.h;
    //添加图片
    var img=document.createElement("img");
    li.appendChild(img);
    //添加超连接诶
    var a=document.createElement("a");
    a.textContent=li.w+"x"+li.h;
    a.href="JavaScript:";
    li.appendChild(a);
    //放入文档中
    wall.appendChild(li);
    wall.appendChild(document.createTextNode(" "));
  };
  format();
})();

//调整布局
function format(){
  var COLUMNS=wall.offsetWidth/130|0,MARGIN=10,EXTENSION=18,
      WIDTH=wall.offsetWidth/COLUMNS-EXTENSION-MARGIN;
  var i,j,s=wall.children,columns=new Float32Array(COLUMNS);
  //遍历元素
  for(i=0;i<s.length;i++){
    s[i].scaledHeight=WIDTH/s[i].w*s[i].h;
    //寻找高度最短的列
    var item=Array.prototype.reduce.call(columns,function(a,b,c){
      return a[0]<b?a:[b,c];
    },[columns[0],0]);
    //将新元素添加到高度最短的列上
    s[i].children[0].style.width=WIDTH+"px";
    s[i].children[0].style.height=s[i].scaledHeight+"px";
    s[i].style.top=item[0]+"px";
    s[i].style.left=item[1]*(WIDTH+MARGIN+EXTENSION)+"px";
    //增加列高度
    columns[item[1]]+=s[i].scaledHeight+MARGIN+EXTENSION+14+8;
  };
  //计算容器高度
  wall.style.height=Math.max.apply(Math,columns)+"px";
};

//绑定事件
window.onresize=format;
</script>　　以上只是示例代码，懒得对低版本浏览器做兼容，所以有些地方直接使用了现代浏览器的特性。比如使用Float32Array代替普通数组省去了对数组元素的初始化步骤；使用Array.prototype.reduce方法来搜索数组中的东西。这些都是低版本浏览器不支持的，如果需要兼容可以手动改写为低版本浏览器兼容的写法，这篇就暂不介绍了。