如何將JavaScript的列表與JavaScript分開？

假設我的Rails 3應用返回一個li標籤的列表。想象一個圖片庫，其中每個li標籤包含一個小圖片。如何將JavaScript的列表與JavaScript分開？

我想要做的是確定屏幕的寬度，然後在下移到下一行之前僅顯示5-7張圖像。

例如，說我有一個寬屏顯示器，我可能有：

IMG1 IMG2 IMG3 IMG4 IMG5 IMG6 IMG7 
IMG8 IMG9 ...

但較小的屏幕上，我會想：

IMG1 IMG2 IMG3 IMG4 IMG5 
IMG6 IMG7 IMG8 IMG9 ...

也許JavaScript是不是最好的這樣做的方法。在Rails中編寫一些方法會更好嗎？

感謝您的任何建議。

來源

2011-08-23 cbmeeks

您可能應該使用CSS解決此問題。使LI浮動：左側，並且它們適應可用的空間。

來源

2011-08-23 11:12:17

僅使用CSS，您可以將<li>元素設置爲display: inline，然後使用相對寬度（百分比）使它們填充空間。要改變每行的元素個數，@media查詢幫助：

li { 
    display: inline; 
} 

@media (max-width: 400px) { 
    li { 
     width : 33%; /* three per line */ 
    } 
} 
@media (max-width: 600px) { 
    li { 
     width : 25%; /* 4 */ 
    } 
} 
@media (min-width: 1000px) { 
    li { 
     width : 20%; 
    } 
}

會有其他的風格，你必須重新設置，使這項工作完全正確（去除填充等），但可能是一個好的開始。

來源

2011-08-23 11:18:11 nickf

這看起來很有趣。現在還不能嘗試，但是@ @ media'元素是否可以在所有瀏覽器中使用？從來沒有聽說過這種方法。 – cbmeeks

看起來像所有的普通瀏覽器，並且IE9 +支持它：http://caniuse.com/#search=media – nickf

但是！不要讓它阻止你使用這種技術！爲常規定義中的項目設置合適的寬度（例如25％），然後使用「@ media」更適合的項目覆蓋它。 IE8及更低版本仍然會顯示內聯項目，但它們將始終佔用25％的寬度。這絕對不是一個表演停止者（至少我希望如此，對你而言） – nickf

你可以很容易地用CSS做到這一點，將所有元素設置爲 display：inline; 把它們放在一個以百分比爲基礎的寬度（或者只是使用整個寬度）

來源

2011-08-23 11:18:18 Exupery

如何將JavaScript的列表與JavaScript分開？

回答

相關問題