Atitit.100% 多個子項目調適型配置屬性

標籤：

 

Atitit.100% 多個子項目調適型配置屬性

 

1.1. 原理1

1.2. Table布局1

1.3. Css布局1

1.4. 判斷amazui載入完畢2

 

1.1. 原理

每個子項目平均分配，但是有個min-width...  min-width優先

 

演算法：首先算出平均值，然後與每一個帶min-width的元素比較，大於平均值的min-width的元素單獨一組。

其他元素再次計算剩餘平均值，分組，直到沒有大與當前平均值的元素

1.2. Table布局

<table width="100%" border="1">

  <tbody>

    <tr>

      <td> </td>

      <td> </td>

      <td> </td>

      <td style="min-width:110px"></td>

    </tr>

  </tbody>

</table>

 

作者::  ★(attilax)>>>   綽號:老哇的爪子 （ 全名：：Attilax Akbar Al Rapanui 阿提拉克斯 阿克巴 阿爾 拉帕努伊 ） 漢字名：艾龍，  EMAIL:[email protected]

轉載請註明來源： http://www.cnblogs.com/attilax/

 

1.3. Css布局

Min-width   list_jobus_cp.js

function SelectorWidthAdj()

{

if(screen.width>320 && screen.width<400)

{

//alert($(".am-selected").length);

var ctrl=$(".am-selected").last();

var widthx=screen.width-$(ctrl).width()-5;

var width_per=widthx/3;

$(".am-selected").each(function(index, element) {

$(element).css("width",width_per+"px");

//alert(index);

        if(index>1)

return false;

    });

}

 

}

 

 

1.4. 判斷amazui載入完畢

 

  if(screen.width>320 && screen.width<400)

{

   var  timerQ5=window.setInterval(function(){

  if(isSelectorLoadFinished())

   {

SelectorWidthAdj();

window.clearInterval(timerQ5);

   }

   

   },30);

   

}

 

 

function isSelectorLoadFinished()

{

  if($(".am-selected").length<4)

   return false;

var ctrl=$(".am-selected").last();

if(ctrl)

{

if($(ctrl).width()>100)

return true;

else

return false;

}

}

1.5. ---finish

 

 

Atitit.100% 多個子項目調適型配置屬性