jquery 動態字串，隨視窗移動

有所進步，紀錄一下

        $(document).ready(function () {
            var $win = $(window),
             $ad = $('.section > p:eq(0)'),
            $cutHeight = $(".wrapper_menu").height() + $("#wrapper > h1:eq(0)").height() + $(".news_txt").height(),
           $Img_Height = $('.section > img:eq(0)').height() == 0 ? 250 : $('.section > img:eq(0)').height(),
           $tempappend = $ad.html().toString().split('');//取得字元陣列

            //調整內容
            function resize_section_content() {
                $(".content").append('<div class=\"section\" id=\"hightSection\" ><div id=\"hightTest\" ></div></div>');
                $("#hightTest").width($('.section:eq(0)').width());
                var $hightTest = $("#hightTest");

                $ad.html("");
                var tempString = "";
                for (var i = 0 ; i < $tempappend.length; i++) {
                    tempString += $tempappend[i];
                    var cutheightTotal = ($win.height() - ($cutHeight + $Img_Height + 100)) >= 0 ? cutheight = ($win.height() - ($cutHeight + $Img_Height + 100)) : 0;//避免空值

                    if (cutheightTotal < $ad.html(tempString).height()) {
                        $ad.html(tempString.substring(0, tempString.length - 1));//取得第一段
                        var _secondSection = "";
                        for (var x = tempString.length - 1; x < $tempappend.length; x++) {
                            _secondSection += $tempappend[x];
                            if (($win.height() - ($cutHeight + 100)) < $hightTest.html(_secondSection).height()) {
                                $(".content").append('<div class=\"section\" ><div id=\"hihi' + x + '\" ></div></div>');
                                $('#hihi' + x).width($('.section:eq(0)').width());
                                $('#hihi' + x).html(_secondSection.substring(0, _secondSection.length - 1));
                                $hightTest.html("");//清空測試
                                _secondSection = _secondSection[_secondSection.length - 1];//清空並退回一格字串
                            } else if (x == $tempappend.length - 1) {
                                $(".content").append('<div class=\"section\" ><div id=\"hihi' + x + '\" ></div></div>');
                                $('#hihi' + x).width($('.section:eq(0)').width());
                                $('#hihi' + x).html(_secondSection);
                            }
                        }
                        $(".content").children().remove("#hightSection");//刪掉測試容器           
                        break;
                    }

                }
            };

            resize_section_content();
            resize_section();

            $win.bind("resize", function () {
                $ad.stop();
                $(".content").children(".section").stop();
                $(".content").children().not('#reSize').remove('.section');
                $(".content").append('<div class=\"section\" id=\"hightSection\" ><div id=\"hightTest\" ></div></div>');
                $("#hightTest").width($('.section:eq(0)').width());
                resize_section_content();
                resize_section();
            });
        });





        /*
          tempString += tempappend[i];
          
  
  
              if ($InitFirstSectionLastWord > tempString.length - 1) {
                  var changeWord = tempappend.slice().slice(tempString.length - 1, $InitFirstSectionLastWord);//縮小
                  var changeWord_str = changeWord.join('', changeWord);//結合字串
  
                  if ($('.section:eq(1)').attr('id') != 'hightSection' && $('.section:eq(1)').length != 0) {
                      $(".content").children().remove("#hightSection");//刪掉測試容器           
                      $(".content").children(".section").not('#reSize').each(function () {
                           var aa = $(this).children('div').attr('defaultindex');//取得字數
                           var idd = $(this).children('div').attr('id');//取得id 
                        
                      });
  
                  }
              }
              else {
                  var changeWord = tempappend.slice().slice($InitFirstSectionLastWord, tempString.length - 1);//放大
                  var changeWord_str = changeWord.join('', changeWord);//結合字串
                  if ($('.section:eq(1)').attr('id') != 'hightSection' && $('.section:eq(1)').length != 0) {
                      var tempword = $('.section:eq(1)').html().toString();
                      tempword = tempword.substr(changeWord_str.length, tempword.length);
                      $('.section:eq(1)').html(tempword);
                     
                  }
              }
  
              $InitFirstSectionLastWord = tempString.length - 1;   //變動最後一個字
              $ad.html(tempString.substring(0, $InitFirstSectionLastWord));//放入第一段
              //若id不是我新增的驗證div，表示原本就有第2欄
              break;
          }
          
      }
      */

        function resize_section() {
            var set_contentwidth;
            var set_contentmarginLeft;
            var set_contentmarginRight;
            var set_orderwidth;
            $('#wrapper > .content').each(function () {
                set_contentwidth = 0;
                set_contentmarginLeft = 0;
                set_contentmarginRight = 0;
                set_orderwidth = 0;
                $(this).find('.section').each(function () {
                    set_contentwidth += $(this).width();
                    set_contentmarginLeft += parseInt($(this).css('marginLeft'));
                    set_contentmarginRight += parseInt($(this).css('marginRight'));
                    set_orderwidth += 5;
                });
                $(this).width(set_contentwidth + set_contentmarginLeft + set_contentmarginRight + set_orderwidth + 'px');
            });

        } 

簡單的說，使內容隨視窗變動而調整
先取得所有字串，再逐一放入設定好的div
在變動的時候，會先設定一個假的div用來偵測是否碰到底
變動結束後，將該div拿掉

本來試過用截取變動字串，再放入或刪掉
但發現實現起來有點困難，因為每段的字數不同，我這一段有變
下一段不一定要變，有可能會有空行或是無字

後來用笨方法，想不到還滿順利的，就是每次變動
都把上一次的section刪掉，再重新製作新的section
如此一來，因為每次都是新的，即可確保不會切錯字，或是少切

從一開始什麼都沒有，到完成可以動態產生section
最後可隨視窗大小而變動，花了大概1天的時間