本文目录
- 怎样使用jQuery实现网页瀑布流示例讲解
- jQuery 求思路，求代码
- Jquery Wookmark做的瀑布流效果 ie7不显示，能解决吗
- 谁知道用jQuery怎么写出仿百度的那种的瀑布流布局啊最好有注释看的明白点的
怎样使用jQuery实现网页瀑布流示例讲解
itemSelector class选择器,默认’.item’，这个表示每个块的选择器columnWidth 一列的宽度isAnimated 使用jquery的布局变化,默认trueanimationOptions animate属性渐变效果(Object { queue: false, duration: 500 })gutterWidth 列的间隙 IntegerisFitWidth 自适应浏览器宽度BooleanisResizableL 是否可调整大小 BooleanisRTL 使用从右到左的布局 Boolean***隐藏网址***itemSelector class选择器,默认’div.post’，这个表示上面介绍的瀑布流的块的选择器nextSelector 表示分页中下一页的选择器，默认为div.navigation a:firstnavSelector 表示分页导航的选择器，分页导航会被隐藏extraScrollPx 滚动条距离底部多少像素的时候开始加载，默认150dataType 表示动态加载返回数据的格式，默认htmltemplate 表示返回json时，用来生成瀑布流块html代码的模板方法，如果返回是json，那么必须指定这个参数，否则会报错
jQuery 求思路，求代码
《!DOCTYPE html》《html》《head》***隐藏网址*** 《script src="jquery-1.8.0.min.js" type="text/javascript"》 《/script》 《title》RunJS 演示代码《/title》 《script》 var n = 20,//n个div each = 3;//每行each个div var w=200,//每个div宽度w，可以随机 gap=20;//div间隔gap，左右、可以分开定义 $(function() { //造数据 for (var i = 0; i 《 n; i++) { $("body").width(12000).append("《div》" + i + "《/div》"); } var left = 0; $("div").each(function() { var me = $(this); var arr = ; for (var j = 0; j 《 each; j++) { arr = Math.floor(Math.random() * 255); } var h = Math.floor(Math.random() * 500) + 150; me.css({ "background-color": "rgb(" + arr + ")", "width": w, height: h + "px", textAlign: "center", lineHeight: h + "px", top: 0, left: left, position: "absolute" }); left += w + gap; }); //实现动画 var left = 0; $("div").each(function(i, dom) { var me = $(this); var l = parseFloat(me.prev().width()) + gap; l = isNaN(l) ? 0 : l; left += l; if (i % each == 0) { left = 0; } var top = 0; var fn = function(mp) { if (mp.length == 0) return; var t = parseFloat(mp.height()) + gap; t = isNaN(t) ? 0 : t; top += t; fn(mp.prevAll(":eq("+(each-1)+")")); } fn(me.prevAll(":eq("+(each-1)+")")); me.animate({ left: left, top: top }, 700); }); }); 《/script》《/head》《body》《/body》《/html》
Jquery Wookmark做的瀑布流效果 ie7不显示，能解决吗
如果你不能驾驭这个插件自行修改的话，建议使用其他插件。最老最全的一款jQuery masony,我用这个做过几个项目兼容没问题的。
谁知道用jQuery怎么写出仿百度的那种的瀑布流布局啊最好有注释看的明白点的
其实这种jquery的插件真的比较多，百度下就有很多。结合两个jquery插件jquery瀑布流插件blocksit和图片延迟加载插件jquery.lazyload可以实现向百度首页那种延迟加载的瀑布流样式。而且代码也比较简单：$(function(){$("img.lazy").lazyload({load:function(){$(’#container’).BlocksIt({numOfCol:5,offsetX: 8,offsetY: 8});}});$(window).scroll(function(){// 当滚动到最底部以上50像素时， 加载新内容if ($(document).height() - $(this).scrollTop() - $(this).height()《50){$(’#container’).append($("#test").html());$(’#container’).BlocksIt({numOfCol:5,offsetX: 8,offsetY: 8});$("img.lazy").lazyload();}});//window resizevar currentWidth = 1100;$(window).resize(function() {var winWidth = $(window).width();var conWidth;if(winWidth 《 660) {conWidth = 440;col = 2} else if(winWidth 《 880) {conWidth = 660;col = 3} else if(winWidth 《 1100) {conWidth = 880;col = 4;} else {conWidth = 1100;col = 5;}if(conWidth != currentWidth) {currentWidth = conWidth;$(’#container’).width(conWidth);$(’#container’).BlocksIt({numOfCol: col,offsetX: 8,offsetY: 8});}});});
