javascript适合移动端的响应式瀑布流插件实例演示

在线预览

jQuery插件大全

实例代码

<div class="sucaihuo-container">
            <div class="demo">
                <div class="grid">
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item" style="height: 245px;"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item" style="height: 290px;"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item" style="height: 140px;"></div>
                    <div class="grid-item" style="height: 200px"></div>
                    <div class="grid-item" style="height: 150px"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item" style="height: 220px"></div>
                    <div class="grid-item" style="height: 205px"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                    <div class="grid-item"></div>
                </div>
            </div>
        </div>
        <script src="/api/jq/5733e32cbe7f1/js/minigrid.js"></script>
        <script>
        (function() {
            minigrid(‘.grid‘, ‘.grid-item‘, 6, null,
                    function() {
                        var d = document.querySelector(‘.demo‘);
                        d.style.opacity = 1;
                    }
            );
            window.addEventListener(‘resize‘, function() {
                minigrid(‘.grid‘, ‘.grid-item‘);
            });
        })();
        </script>

  

时间: 2024-10-09 22:09:27

javascript适合移动端的响应式瀑布流插件实例演示的相关文章

一款很实用的jQuery鼠标悬浮有动画效果的响应式瀑布流插件

在线预览 下载地址 实例代码 <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content=&

响应式瀑布流插件Grid-A-Licious

Grid-A-Licious是一款遵守MIT协议的响应式瀑布流插件.该插件总代码行不超过400行,实现很巧妙,使用时也很流畅.实现原理也很简单,根据屏幕宽度和参数中设置的列宽度以及每项之间的间隔宽度,计算出当前屏幕宽度下应该生成几个等宽列:列生成好之后,再把每项放到等宽列中:当屏幕尺寸改变时,重新计算列表,然后再重新填充项. 使用该插件也很方便.使用实例: <html> <head> <meta charset="utf-8" /> <titl

js实现响应式瀑布流

导读:瀑布流,又称瀑布流式布局.是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附加至当前尾部.最早采用此布局的网站是Pinterest,逐渐在国内流行开来.国内大多数清新站基本为这类风格,像花瓣网.蘑菇街.美丽说等. 最近在好多地方看到瀑布流的字眼,感觉真的很不错,于是就想自己能不能写一个呢,而且是响应式的.经过将近两天的研究,终于写出来了,先传几张图给大家看看最终的效果:      随着浏览器页面的大小调整.布局从四列逐渐变成三

jQuery超酷响应式瀑布流效果

参考 http://www.sucaihuo.com/js/74.html <script src="scripts/blocksit.min.js"></script> 1 2 3 4 5 6 7 8 <div  id="container">     <div  class="grid">         <!-- content -->     </div>     &

avalon js做的响应式瀑布流

效果: http://pan.baidu.com/s/1dDisF9B 图片比较大5m,要多等一下 感谢迅雷ued的图片支持 1 function getIndex(index) { 2 if (index < 10) { 3 index = "00" + index; 4 } else if (index < 100) { 5 index = "0" + index; 6 } 7 return index; 8 } 9 var $ = function

响应式瀑布流

https://github.com/sandraryan/practise/tree/master/js/demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&qu

8款实用的Jquery瀑布流插件

1.网友Null分享Jquery响应式瀑布流布局插件 首先非常感谢网友Null的无私分享,此作品是一款响应式瀑布流布局Jquery插件,网友Null增加了一个屏幕自适应和响应式,响应式就是支持智能手机浏览,效果非常棒,遗憾的是不支持IE9以下版本,所以网友们在演示的时候请使用谷歌.火狐等浏览器... 分享JquerySchool网站里面的8款Jquery瀑布流插件 2.网友sole分享23行Jquery代码实现定位瀑布流布局特效 首先非常感谢网友sole的无私分享,此Jquery特效是我从互联网

带多种过渡动画的响应式jQuery幻灯片插件

Nivo-Slider是一款非常强大的响应式jQuery幻灯片插件.该幻灯片插件内置有16种不同的动画过渡效果.它提供了丰富的参数来控制幻灯片的播放.它使用简单,并且可以兼容IE8浏览器. 在线预览   源码下载 使用方法 使用Nivo-Slider幻灯片需要引入nivo-slider.css,jQuery(1.7+)和jquery.nivo.slider.js文件. 1 2 3 <link rel="stylesheet" href="css/nivo-slider.

SlidesJS - 老牌的响应式 jQuery 幻灯片插件

SlidesJS 是一款老牌的 jQuery 幻灯片插件,经过多年的发展,已经成为一款功能齐全,设计精巧的幻灯片插件.支持循环.自动播放功能和淡入淡出过渡效果,并且能够自动生成分页,可以帮助开发者制作出优雅的幻灯片效果. 插件下载     效果演示 使用示例: <!doctype html> <head> <style> /* Prevents slides from flashing */ #slides { display:none; } </style>