Web 技术研究所

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

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

  以前的文章中有介绍过照片墙的布局,实际上这个布局设计非常适合用于响应式。因为它无所谓容器的尺寸,也无所谓单个内容的尺寸,总是可以适应的很好,可以将容整齐的展示出来。当然下面的算法写的并不好,还可以继续优化以得到更优结果。

<style>
body {overflow-y:scroll;}
#wall {
  background:#FAFAFA;
  text-align:justify;
  font-size:0px;
  padding:0px;
}
#wall>li {
  box-sizing:border-box;
  display:inline-block;
  color:#333;
  background:#F5F5F5;
  border:1px solid #CCC;
  margin:5px 5px;
  text-align:center;
  font:14px/1 Simsun;
  text-decoration:none;
  overflow:hidden;
}
</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;
    li.textContent=li.w+" "+li.h;
    wall.appendChild(li);
    wall.appendChild(document.createTextNode(" "));
  };
  format();
})();

//调整布局
function format(){
  var WIDTH=wall.offsetWidth-10,HEIGHT=50,MARGIN=10;
  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;
    //如果该行放不下缩放后的元素则
    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].style.height=(HEIGHT+h|0)+"px";
  };
};

//绑定事件
window.onresize=format;
</script>
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^