用 js 寫了頁面的調整js代碼

例如：在一個頁面中要想底部對齊的。本人對"div"的控制

比如：在一個div中用title還有描述"description"兩部分，如果標題站得像素大了，顯而易見描述部分就小了所以要寫一個js 來控制。

下面是一個頁面（在HMY項目中一個頁面）我來總結一下

<script type="text/javascript">


    $(function(){
        $.post('getLoadDetroitCompanyItems.action',function(jsonObj) {        
            var items = jsonObj.ITEMS;
            for (var i=0; i < items.length; i ++) {
              var tmpul='';
                if ((i+1)%2!=0) {
                    tmpul="<li  class='li_left_style'>";
                } else if((i+1)%2==0){
                    
                 tmpul="<li  class='li_right_style'>";
                }
                if (items[i].imageURL == null || items[i].imageURL =='') {
                    
                    tmpul+= "<div class='border_style_img'><a target='_blank' href='viewCompanyProfile.action?orgId="+items[i].url+"'><img width='160px;' height='138px;' src='././images/profile_no_logo.gif'/></a></div>";
                } else {
            
                    tmpul+="<div class='border_style_img'><a target='_blank' href='viewCompanyProfile.action?orgId="+items[i].url+"'><img width='160px;' src='"+items[i].imageURL+"'/></a></div>";
                }

                  tmpul+=       " <div class ='li_left_div'>"+

                            //       這個藍色的字體原來是<span class='spand_content_style1' id='"+i+"'>爲了區別加了一個titleclass='title spand_content_style1'這樣就唯一了
                                " <div class='title_wrap'><span class='title spand_content_style1' name='"+i+"'><a href='viewCompanyProfile.action?orgId="+items[i].url+" 'target='_blank'>"+items[i].title+"</a></span>"+
                                " <a target='_blank' href='viewCompanyProfile.action?orgId="+items[i].url+"'><span class='spand_content_style' >[ "+items[i].jobPositionCount+" Job Openings]</span></a></div>"+
                                " <div class='hr'><hr /></div>"+
                                " <div class='company_hiring_style1' id='company_content_"+i+"' style='height:110px;' >"+items[i].description+"</div>"+
                                " </div>"+
                                " </li>";
                $("#portfolio_comp_hring").append(tmpul);                
            }
            resizeCompanyHeight();
        } );
    });
    
    
    function resizeCompanyHeight(){
        setTimeout(function(){

// 這是  <ul id="portfolio_comp_hring"> ul 的id  爲“portfolio_comp_hring”。這個是 title<span ></span > 的id
            $("#portfolio_comp_hring .title").each(
                function(){

// 這個獲取整個第一個<span>
                    var div = $(this);

// 獲得name值,這個是name名稱。也可以用id='"+i+"' 那就改 var currentId = div.attr("id");

//通過attr("name") 可以獲得name 的值
                    var currentId = div.attr("name");

//   var currentId = div.attr("id");就是獲取自增”i “的值

//關鍵的這個顯示的<span></span>和<div class='company_hiring_style1' id='company_content_"+i+"' style='height:110px;' >"+items[i].description+"</div>"是同一個

//因爲我上面通過ajax 循環獲取的值要通過id 或者class 判斷唯一性
                    var forResizeCompanyId = "company_content_"+currentId;
                    resizeSpan(true, 24, div, forResizeCompanyId);                    
                }
             )
        },200);    
    }    
    
</script>
         <div style="height:550px;">

            <div style="height:514px;">    
                
                <ul id="portfolio_comp_hring">

                </ul>
                    
            </div>
            
    </div>

===========================================================================

function resizeSpan(isHeight, maxHeight, span,forResizeId) {
    setTimeout(function(){
        if (isHeight == null) {
            isHeight = true;
        }
        var divHeight =$("#"+forResizeId).height();

//爲true;判斷
        if (isHeight) {
            var spanhg = '';
            var span_height=span.height();
            if (span.height() > maxHeight) {

                newheight = span.height();
                spanhg= newheight-maxHeight;

                var tpheight='';
                if (spanhg < divHeight) {
                    tpheight = divHeight-spanhg;
                }else{
                    tpheight = 0;
                }
                $("#"+forResizeId).height(tpheight);
            }
        }else{
            alert("not implemented...");
        }
    },0);    
}

=================================8888888888888888888

//下面的js 是判斷圖片的大小來調整顯示圖片

function resizeImg(isHeight, maxLength, img) {
// 加載延長   setTimeout(function(){
        if (isHeight == null) {
            isHeight = true;
        }
        if (isHeight) {
            if (img.height() > maxLength) {
                // calculate new image dimensions
                newHeight = maxLength;
                newWidth = img.width() / (img.height() / maxLength);
                // set new image dimensions
                img.height(newHeight).width(newWidth);
            } else {
                // center the img
                if (img.height() > 1) {
                    img.css("margin-top", (maxLength - img.height()) / 2);
                    img.css("margin-bottom", (maxLength - img.height()) / 2);
                }
            }
        } else {
            if (img.width() > maxLength) {
                // calculate new image dimensions
                newWidth = maxLength;
                newHeight = img.height() / (img.width() / maxLength);
                // set new image dimensions
                img.height(newHeight).width(newWidth);
            }
        }
    },1000);    
}