qq飞车手游查询已有角色:jQuery Wookmark 瀑布流布局插件

jQuery Wookmark 瀑布流布局插件
 點擊預覽  點擊下載

qq飞车手游怎么拉黑 www.kwigj.icu 瀑布流布局非常適合大量圖片的展示,一改過去裁剪圖片尺寸統一的排版,每張圖片都能完全展示,并錯落有致,讓人眼前一亮。

注意事項:

1.項目中的 img 元素的 width 和 height 屬性需要寫,否則定位會不準確。(可以用 JavaScript 實時獲取圖片的寬高,但圖片數量過多時,這將是一件不靠譜的事情,如果你執意要這么做,可以參考這個Demo)

【options 參數說明】

名稱 默認值 說明
container $("body") 父容器
offset 2 項目間距(px)。橫向縱向相同,不支持單獨設置。
autoResize false 自動重排。當瀏覽器窗口大小大小變化時進行重新排列。
itemWidth $(this[0]).outerWidth() 項目寬度(px)。默認是取第一個項目的寬度。
resizeDelay 50 重排間隔時間(ms)。檢測自動重排的間隔時間。

【使用方法】

載入 JavaScript 文件

  1. <script src="js/jquery.js"></script>  
  2. <script src="js/jquery.wookmark.js"></script> 

CSS 樣式

  1. /*  
  2.  * 父容器需要設置相對定位  
  3.  * 項目需要設置隱藏  
  4.  */  
  5. #list{position:relative;}  
  6. #list li{display:none;}  

DOM 結構

  1. <!--  
  2. 本例中,$("#list") 就是父容器,內部的 li 就是要進行瀑布流布局的項目。當然也可以使用 p 或其他標簽的來寫。  
  3. 項目中的 img 元素的 width 和 height 屬性需要寫,否則定位會不準確。  
  4. -->  
  5. <ul id="list">  
  6.     <li><img src="pic_1.img" width="200" height="283"><p>text</p></li>  
  7.     <li><img src="pic_2.img" width="200" height="300"><p>text</p></li>  
  8.     ...  
  9.     <li><img src="pic_n.img" width="200" height="252"><p>text</p></li>  
  10. </ul>  

調用 Wookmark

  1. $("#list li").wookmark({  
  2.     container:$("#list"),  
  3.     offset:10,  
  4.     itemWidth:200  
  5. }); 

轉載請注明:qq飞车手游怎么拉黑 ? jQuery Wookmark 瀑布流布局插件

評論列表(網友評論僅供網友表達個人看法,并不表明本站同意其觀點或證實其描述)