欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

javascript实现仿百度图片的瀑布流加载效果_javascript技巧

程序员文章站 2022-03-21 11:17:37
...
由于没有服务器,就用一个json字符串作为下拉时加载图片数据的来源了

html:




javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧
javascript实现仿百度图片的瀑布流加载效果_javascript技巧

JSWallper.js:

window.onload=function(){
 
 waterfall('main','pin');
 
 var dataInt={'data':[{'src':'1.jpg'},{'src':'2.jpg'},{'src':'3.jpg'},{'src':'4.jpg'}]};
 
 window.onscroll=function(){
  if(checkscrollside()){
   var oParent = document.getElementById('main');// 父级对象
   for(var i=0;i

演示图:

javascript实现仿百度图片的瀑布流加载效果_javascript技巧

源码下载:http://www.jb51.net/jiaoben/452663.html

演示地址:http://demo.jb51.net/js/2016/JSWallper/