根據屏幕寬度加載縮略圖

我希望能夠根據頁面的寬度將多個縮略圖加載到頁面上。加載的圖像數量取決於頁面的寬度。根據屏幕寬度加載縮略圖

圖像（100 x 100）將加載，使它們並排放置，並佔據整個屏幕寬度。

什麼是最好的方法來實現這一目標？

在此先感謝

這就是我來了這麼遠： -

<script src="Scripts/jquery-1.9.0.min.js" type="text/javascript"></script> 

<style type="text/css"> 

    #dv_frame { 
     width: 100%; 
     /*border: 1px solid #cccccc;*/ 
     text-align: center; 
     height: 110px; 
     position: relative; 

    } 

    #dv_images { 
     /*border: solid 1px blue;*/ 
     height: 100px; 

     margin: auto; 

    } 

    .myImage{ 
     width: 100px; 
     height: 100px; 
     border: solid 1px red; 
     float: left; 
     margin-right: 5px; 
     margin-left: 5px; 
    } 



</style> 


<script type="text/javascript"> 

    $(document).ready(function() { 

     var container = $("#dv_frame") 
     var tWidth = 0 
     var width = container.width() 

     for (c = 0; c < 100; c++) { 
      tWidth = tWidth + 110 
      if (tWidth > (width - 10)) { 
       $("#dv_images").css("width", (tWidth - 80)) 
       break; 
      } 
      addSquare() 
     } 

     function addSquare() { 
      $("#dv_images").append("<div class='myImage'></div>") 
     } 

    }); 

</script> 

    </head> 

<body> 
<div id="dv_frame"><div id="dv_images"></div></div> 
</body> 
</html>

來源

2013-07-11 Shazoo

100獲取窗口，分的寬度，並且您有需要請求的圖像的數量。我敢肯定，如果你提供了一些代碼，人們會很樂意幫助你，但似乎你只是想讓別人爲你寫這篇文章？ – Luke

夠公平的，我已經輸入了我迄今爲止的內容。我只是想知道是否有更好的方法去做 – Shazoo

添加圖像，每一次檢查的寬度，而不是，我只是計算從一開始就需要的圖像數量。將它們添加到不在DOM中的虛擬div，然後將其添加到您的容器（對於速度&效率）。

var $container = $("#dv_frame"), 
    imageWidth = 110, // including margin & padding 
    imagesNeeded = Math.floor($container.width()/imageWidth), // rounded down, width/imageWidth 
    i, // iterator 
    $foo = $('<div></div>'); // empty container div 

for(i = 0; i < imagesNeeded; i++) { 
    // appending to our empty container div 
    $foo.append("<div class='myImage'></div>"); 
} 

// then appending the contents of our container div to the DOM. 
// this is quicker and more efficient than doing lots of appends to the DOM in a loop. 
$("#dv_images").append($foo.contents());

實施例：http://jsfiddle.net/lukemartin/d8WNy/

來源

2013-07-11 14:45:17 Luke

完美，比我的解決方案好得多，謝謝！ – Shazoo

根據屏幕寬度加載縮略圖

回答

相關問題