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

程序员文章站 2022-03-20 18:13:40

...

由于没有服务器，就用一个json字符串作为下拉时加载图片数据的来源了

html:

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/

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

利用JS实现简单的瀑布流加载图片效果

28.JavaScript实现简单的图片瀑布流插件

JavaScript实现瀑布流图片效果

使用JavaScript判断图片是否加载完成的三种实现方式_javascript技巧

JS仿淘宝实现的简单滑动门效果代码_javascript技巧

javascript自适应宽度的瀑布流实现思路_javascript技巧

js实现瀑布流的一种简单方法实例分享_javascript技巧

jquery实现的图片点击滚动效果_javascript技巧

JS实现点击图片在当前页面放大并可关闭的漂亮效果_javascript技巧

js实现图片漂浮效果的方法_javascript技巧