日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
jQuery圖片延遲加載技術(shù)的應(yīng)用

我們使用新浪微博的時(shí)候，在“微博精選”頁(yè)面里可以看到大量的微博信息。該頁(yè)面信息主要是以圖片配文字說(shuō)明，頁(yè)面使用了自適應(yīng)網(wǎng)格布局即砌墻效果，圖片加載技術(shù)，以及滾動(dòng)加載內(nèi)容技術(shù)。本文先介紹砌墻效果。

公司主營(yíng)業(yè)務(wù)：成都網(wǎng)站建設(shè)、做網(wǎng)站、移動(dòng)網(wǎng)站開(kāi)發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競(jìng)爭(zhēng)能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開(kāi)放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來(lái)的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來(lái)驚喜。成都創(chuàng)新互聯(lián)推出臨滄免費(fèi)做網(wǎng)站回饋大家。

其實(shí)我們做頁(yè)面布局就相當(dāng)于砌墻師傅在完成一堵墻的施工。我們?cè)谠O(shè)計(jì)頁(yè)面的時(shí)候，假如有很多相同的DIV，裝載不同的內(nèi)容，這些DIV都使用float：left，如果不限制這些DIV的高度，頁(yè)面布局可能會(huì)出現(xiàn)砌墻架空的現(xiàn)象。點(diǎn)擊這里查看效果，而經(jīng)過(guò)布局優(yōu)化后的頁(yè)面布局效果大不一樣，請(qǐng)看DEMO。

本文使用David DeSandro寫的一個(gè)頁(yè)面布局插件Masonry，該插件基于jQuery庫(kù)，提供很多參數(shù)和方法，可以根據(jù)不同的需求定制不同的效果。

XHMTL

首先是要引入jQuery庫(kù)和Masonry插件。

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2.   
    3.

我們仿照新浪微博構(gòu)建一個(gè)html頁(yè)面，DIV#container放置多個(gè)相同的DIV.photo。

 
 
 
 
    
  
  
  
  
  1.    
    2. 
  
  
  
  
  2.          
    3. 
  
  
  
  
  3.             
    4. 
  
  
  
  
  4.          
    菓小菓：隨時(shí)都要賣，還要又又美味
       
    5. 
  
  
  
  
  5.       
   
  •       .....N個(gè)photo...   
  •    

    CSS

     
 
 
 
      
  
  
  
  
    1. #container{width:780px; margin:10px auto}   
      2. 
  
  
  
  
    2. .photo{float:left; width:205px; margin:10px; padding:10px; border:1px solid #d3d3d3;   
      3. 
  
  
  
  
    3.  background:#f7f7f7;-moz-border-radius:4px;-khtml-border-radius: 4px;-webkit-border-radius: 4px;    
      4. 
  
  
  
  
    4.  border-radius:4px;}   
      5. 
  
  
  
  
    5. .photo img{width:205px}   
      6. 
  
  
  
  
    6. .photo p{line-height:20px; margin:4px auto}   
      7.

    jQuery

     
 
 
 
      
  
  
  
  
    1. $(function(){   
      2. 
  
  
  
  
    2.   $('#container').masonry({   
      3. 
  
  
  
  
    3.     itemSelector : '.photo',   
      4. 
  
  
  
  
    4.     columnWidth : 247   
      5. 
  
  
  
  
    5.   });   
      6. 
  
  
  
  
    6. });   
      7.

    調(diào)用masonry插件，配置參數(shù)itemSelector對(duì)應(yīng)的是class為photo的div，columnWidth為247，columnWidth的值是由.photo的寬度+padding*2+margin*2+border*2得到的。

    上面只介紹砌墻布局，接下來(lái)結(jié)合本文把圖片加載技術(shù)和滾屏加載技術(shù)進(jìn)行介紹。


    分享名稱：jQuery圖片延遲加載技術(shù)的應(yīng)用
    地址分享：http://www.5511xx.com/article/cdcshcj.html