有時候在頁面的某個模塊中，需要無限循環的滾動一些消息。那么如果我們用js實現無縫銜接滾動的思路是什么呢(比如我們這個模塊是向上滾動的)？克隆A一份完全一樣的數據B放在原數據A的后面；

使用setInterval向上滾動A的父級容器；

當向上滾動的距離L正好的A的高度時(L==A.height())，L=0，重新開始滾動，無限循環。

克隆一份數據放在后面，是為了當A向上移動時，后面有數據能填補漏出來的空白。當B移動到可視區域的頂部時，此時A剛好移出可視區域，那么此時將容器重新歸0，用戶是沒有感知的，以為還是B中的第一條數據。然后繼續向上滾動。

1. 使用CSS3來實現

若要用CSS3的屬性實現的話，非animation莫屬，因為transition是需要手動的觸發，而且不能無限次執行下去，而animation恰好能解決這個問題。

假如數據是在寫死的情況下時，我們完全可以手動復制一份數據放在后面，然后把原數據的高度寫到css中，實現的思路與上面的一樣：

css樣式:@keyframes?rowup?{

0%?{

-webkit-transform:?translate3d(0,?0,?0);

transform:?translate3d(0,?0,?0);

}

100%?{

-webkit-transform:?translate3d(0,?-240px,?0);

transform:?translate3d(0,?-240px,?0);

}

}

.list{

width:?300px;

border:?1px?solid?#999;

margin:?20px?auto;

position:?relative;

height:?200px;

overflow:?hidden;

font-size:?15px;

font-family:?'Microsoft?Yahei';

}

.list?.rowup{

-webkit-animation:?10s?rowup?linear?infinite?normal;

animation:?10s?rowup?linear?infinite?normal;

position:?relative;

}

html格式:

1-?121233fffffr國家認可更健康進口價格困擾2-?31232333-?個人口結構俄跨入國際科技館客人感覺4-?ggrgerg5-?fvdgdv6-?德國南部巴士與卡車相撞起火?31人受傷11人死亡樸槿惠庭審時突然昏迷?支持者：她死了法官要負責！7-?外交部再次回應印軍越界:要求立即將越界部隊撤回8-?德國網紅致信默克爾9-?國資委原1-?121233fffffr國家認可更健康進口價格困擾2-?31232333-?個人口結構俄跨入國際科技館客人感覺4-?ggrgerg5-?fvdgdv6-?德國南部巴士與卡車相撞起火?31人受傷11人死亡樸槿惠庭審時突然昏迷?支持者：她死了法官要負責！7-?外交部再次回應印軍越界:要求立即將越界部隊撤回8-?德國網紅致信默克爾9-?國資委原

2. 數據不確定時

在上面的小節中，數據是死的，高度也是寫死到了CSS3中。可是如果從接口獲取到的數據個數不定呢，每條數據的長度也不確定，怎么辦呢？

這里就需要根據數據來重新計算高度，并寫到CSS里，可是keyframes修改起來還比較麻煩，那么我們就用覆蓋的方式來重新keyframes中的數據：//?設置keyframes屬性

function?addKeyFrames(y){

var?style?=?document.createElement('style');

style.type?=?'text/css';

var?keyFrames?=?'\

@-webkit-keyframes?rowup?{\

0%?{\

-webkit-transform:?translate3d(0,?0,?0);\

transform:?translate3d(0,?0,?0);\

}\

100%?{\

-webkit-transform:?translate3d(0,?A_DYNAMIC_VALUE,?0);\

transform:?translate3d(0,?A_DYNAMIC_VALUE,?0);\

}\

}\

@keyframes?rowup?{\

0%?{\

-webkit-transform:?translate3d(0,?0,?0);\

transform:?translate3d(0,?0,?0);\

}\

100%?{\

-webkit-transform:?translate3d(0,?A_DYNAMIC_VALUE,?0);\

transform:?translate3d(0,?A_DYNAMIC_VALUE,?0);\

}\

}';

style.innerHTML?=?keyFrames.replace(/A_DYNAMIC_VALUE/g,?y);

document.getElementsByTagName('head')[0].appendChild(style);

}

計算出原始數據A的高度后，執行?addKeyFrames?方法，往head中添加css屬性，那么這里的rowup就會覆蓋掉之前設置的，每次滾動的距離就是數據A的高度：

function?init(){

var?data?=?'塞下秋來風景異，衡陽雁去無留意。四面邊聲連角起，千嶂里，長煙落日孤城閉。濁酒一杯家萬里，燕然未勒歸無計。羌管悠悠霜滿地，人不寐，將軍白發征夫淚。',?//樣例數據

data_len?=?data.length,

len?=?parseInt(Math.random()*6)+6,?//?數據的長度

html?=?'

';

for(var?i=0;?i

var?start?=?parseInt(?Math.random()*(data_len-20)?),

s?=?parseInt(?Math.random()*data_len?);

html?+=?'

'+i+'-?'+data.substr(start,?s)+'';

}

html?+=?'

';

document.querySelector('.list?.cc').innerHTML?=?html+html;?//?復制一份數據

var?height?=?document.querySelector('.list?.ss').offsetHeight;?//?一份數據的高度

addKeyFrames(?'-'+height+'px'?);?//?設置keyframes

document.querySelector('.list?.cc').className?+=?'?rowup';?//?添加?rowup

}

init();

這樣在CSS3與js的結合下，更完美的呈現無縫滾動。

3. 橫向滾動

上面講解的都是向上滾動，那么向左，向右，向下也比較容易理解了，把transform中的值更改為對應的數值即可。

4. 總結

使用CSS來進行動畫的展示，會讓頁面顯得更加流暢。如果能用CSS實現，可以嘗試盡量用CSS實現下。

總結

以上是生活随笔為你收集整理的html图片墙 无限滚动,尝试用CSS3实现无限循环的无缝滚动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。