Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

响应式 照片墙式的内容布局设计(续)

  昨天的文章中介绍了使用照片墙的方式对大量不定尺寸的块做响应式的布局,但使用的例子只是等比例的块而已,因此大家可能不理解具体情形下要如何使用。正常的布局中,块里会放图片、文字、超链接的东西。其实只要其它东西的尺寸固定,且让图片等比缩放即可。

<style>
body {overflow-y:scroll;}
#wall {
  background:#FAFAFA;
  text-align:justify;
  font-size:0px;
  padding:0px;
}
#wall>li {
  display:inline-block;
  color:#333;
  background:#F5F5F5;
  border:1px solid #CCC;
  padding:8px;
  margin:5px;
  text-align:center;
  font:14px/1 Simsun;
  text-decoration:none;
  overflow:hidden;
}
#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 WIDTH=wall.offsetWidth-10,HEIGHT=50,MARGIN=10,EXTENSION=18;
  var l=0,r=0,k=0,s=wall.children,rowWidth=0;
  //遍历元素
  for(r=0;r<s.length;r++){
    //计算缩放后的宽度
    s[r].scaledWidth=HEIGHT/s[r].h*s[r].w;
    //计算占用的宽度
    var usedWidth=s[r].scaledWidth+MARGIN+EXTENSION;
    //如果该行放不下缩放后的元素则
    if(rowWidth+usedWidth>WIDTH)
      //对剩余的空白进行微调,并重置行参数
      resize(WIDTH-rowWidth+MARGIN),rowWidth=0,k=0;
    //累加行参数
    k+=s[r].k;
    rowWidth+=usedWidth;
  };
  //对末行处理
  resize(0);
  //处理微调
  function resize(trimming){
    for(var h=trimming/k;l<r;l++)
      s[l].style.width=(s[l].scaledWidth+s[l].k*h|0)+"px",
      s[l].children[0].style.height=(HEIGHT+h|0)+"px";
  };
};

//绑定事件
window.onresize=format;
</script>
  即使用于等比缩放的东西只是图片,整个计算依然可以平衡。因为图片与LI之间的间隙是固定的,只要在计算时处理掉即可,所以代码中计算占用宽度的地方加了个EXTENSION。而代码中li.k的计算依然是li.w/li.h,它不受EXTENSION的影响,因为只有图片是等比缩放的。用数学的语言描述就是li.k表示的是数学函数width=f(height)的导数,而实际上每个LI的宽度比里面IMG多了个常数EXTENSION,即原式等于width=f(height)+EXTENSION,常数项求导消去,所以EXTENSION并不影响li.k的计算。
  需要注意的是文字可能会很长,长到LI放不下,所以最好对LI设置宽度,以免LI被撑破。当然这个例子只是非常简单的上下结构,即使在LI内使用浮动、左右结构,甚至半包围结构,只要只有一个图片可以用于等比缩放,其它地方是固定宽度就可以使用这种布局方式。
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^