小说,小说网

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

jQuery圖片延遲加載技術(shù)的應(yīng)用

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

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

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

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

XHMTL

首先是要引入jQuery庫和Masonry插件。

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

 
 
 
 
  
  
  
     
  
  
  
           
  
  
  
              
  
  
  
           菓小菓：隨時都要賣，還要又又美味

.....N個photo...

CSS

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

jQuery

 
 
 
 
  
  
  
  $(function(){   
  
  
  
    $('#container').masonry({   
  
  
  
      itemSelector : '.photo',   
  
  
  
      columnWidth : 247   
  
  
  
    });   
  
  
  
  });

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

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

網(wǎng)頁名稱：jQuery圖片延遲加載技術(shù)的應(yīng)用
標(biāo)題網(wǎng)址：http://m.fisionsoft.com.cn/article/cdcshcj.html

新聞中心

其他資訊