有問題的jQuery插件和圖像

-2

我正在jquery插件上，在網格中創建列，並且我在圖像上遇到困難。我不確定是否某種CSS需要更改，或者JavaScript運行得太快。下面是HTML：有問題的jQuery插件和圖像

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">  </script> 
    <script src="gridilizer.js"></script> 
    <script> 
      $(document).ready(function() { 
        $(this).gridilizer(); 
      }); 
    </script> 
    <style> 
    body, html { 
     padding:0; 
     margin:0; 
    } 
    header { 
     background:#dcd; 
     height:200px; 
     font-size:100px; 
     text-align:center; 
     line-height:200px; 
    } 
    [data-rows] { 
     background:#dcdcdc; 
    } 
    </style> 
    </head> 
    <body> 
    <header> 
      GRIDILIZER.JS 
    </header> 

    <div class="row"> 
     <div data-rows="7"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut. 
     </div> 
     <div data-rows="5"> 
      test8 
     </div> 
    </div> 

    <div class="row"> 
     <div data-rows="12"> 
      <img width="50%" src="http://images.wikia.com/powerlisting/images/b/b9/Mountain_wallpaper_005_1024.jpg" /> 
      <p>Image</p> 
     </div> 
    </div> 

    <div class="row"> 
     <div data-rows="3"> 
      <h1>Headline</h1> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut. 
     </div> 
     <div data-rows="3"> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue aliquam lorem quis varius. Ut ac libero vel purus ultricies ultricies. Curabitur diam leo, consequat vel volutpat ut, auctor vehicula est. Sed lorem arcu, fermentum sed aliquam et, sollicitudin vitae tellus. Vivamus purus urna, vehicula ut euismod nec, dapibus ut lorem. Ut magna lorem, volutpat ut hendrerit ac, fringilla vitae nibh. Ut tempor elit non libero pellentesque dignissim. Nunc tincidunt ornare lorem, id porttitor leo varius ut. 
     </div> 
     <div data-rows="3"> 
      test4 
     </div> 
     <div data-rows="3"> 
      test4 
     </div> 
    </div> 
    </body> 
    </html>

而且我的javascript：

(function($){ 
$.fn.extend({ 
    gridilizer:function(){ 
     // Style Row Here 
     $(".row").css({ 
      'width':'95%', 
      'margin':'2% 2.5%', 
      'display':'block', 
      'float':'left' 
      //'min-height':'200px' 
      //'height':'auto', 
      //'overflow':'hidden' 
     }); 
     //Get Elements with data-rows property 
     elem=$("[data-rows]"); 
     // Set background color for border hack 
     color=$('body').css("background-color"); 
     if(color='rgba(0,0,0,0)'){ 
      $('body').css('background-color','#fff') 
     } 
     // Style each grid element 
     return elem.each(function(){ 
     $this=$(this); 
     //Get number of rows 
     rows=$this.attr('data-rows'); 
     //Math to find number of rows in a 12-grid area 
     width=(rows/12*100); 
     //Set border to background color 
     background=$this.parents(":not(.row)").css("background-color"); 
     $this.css({ 
      'width':width+'%', 
      'display':'block', 
      'float':'left', 
      'padding':'2% 5%', 
      'border':'10px solid '+background, 
      '-webkit-box-sizing':'border-box', 
      '-moz-box-sizing':'border-box', 
      'box-sizing':'border-box' 
      }); 
     console.log($this.parent('.row').height()); 
     height = $this.parent().height(); 
     $this.height(height); 
      }); 
     } 
    }); 
})(jQuery);

來源

2012-06-19 Conlin Durbin

是什麼問題？你期望發生什麼事情？ – Mathletics

[鏈接]（http://conlindurbin.kodingen.com/grid/）這就是圖像發生的事情。我的形象只是溢出了，而不是匹配大小。網絡發生的一幕顯示，JavaScript首先被加載。不知道這是否是問題所在。 –

你的圖像問題不清楚請嘗試把JavaScript放在頁面底部如果你認爲腳本運行太快 –

這可能是因爲你在呼喚你的插件前的DOM完全加載。瀏覽器解析html代碼的方式是從上到下。所以它先打你的函數調用然後渲染DOM。根據執行插件函數需要多長時間，整個頁面加載時DOM可能不會完全加載。嘗試將呼叫移到底部，即在尾部標籤（）之前。您仍然可以在聲明中留下聲明。讓我知道事情的後續。

來源

2012-06-19 13:55:06

移動不能修復它。我打電話給包裝在$（document）.ready（）中的插件，但這似乎也沒有幫助。 –

在

this.css({ 
     'width':width+'%', 
     'height':100% 
     'display':'block', 
     'float':'left', 
     'padding':'2% 5%', 
     'border':'10px solid '+background, 
     '-webkit-box-sizing':'border-box', 
     '-moz-box-sizing':'border-box', 
     'box-sizing':'border-box' 
     });**

試着增加「高度」：100％，使其適合父div的範圍內。

來源

2012-06-19 13:56:25 Marc

也不起作用。 –

有問題的jQuery插件和圖像

回答

相關問題