• 1. 瀑布流和微博分享实现
  • 2. 瀑布流实现实现方式: 1.传统多列浮动(列数固定),代表:蘑菇街 2. CSS3 定义 3.绝对定位(图片高度需确认),代表: Pinterest 我们使用jQuery插件masonry实现瀑布流 目前最流行的瀑布流布局
  • 3. jQuery插件masonry官网: http://masonry.desandro.com/ 下载: jquery.masonry.js 或jquery.masonry.min.js
  • 4. jQuery插件masonry参数说明参数名 参数说明 itemSelector class选择器,默认'.item' columnWidth 一列的宽度 isAnimated 使用jquery的布局变化,默认true animationOptions animate属性渐变效果(Object { queue: false, duration: 500 }) gutterWidth 列的间隙 Integer isFitWidth 适应宽度Boolean isResizableL 是否可调整大小 Boolean isRTL 使用从右到左的布局 Boolean
  • 5. jQuery插件masonry方法说明调用masonry插件的方法格式是:$('#container').masonry( 'methodName', [optionalParameters] ) 例子: 》.masonry( 'appended', $content, isAnimatedFromBottom )//触发添加到container的项目的布局 》.masonry( 'destroy' )// 完全移除masonry的功能 返回到元素预初始化状态 》.masonry( 'layout', $items, callback )// 指定项目的布局 》.masonry( 'option', options ) //设置option 》.masonry( 'reloadItems' ) //重新聚合所有项目以当前的顺序 》.masonry( 'reload' ) //用于预先考虑或者插入项目 .masonry( 'reloadItems' )的简化版 》.masonry( 'remove', $items ) //从masonry实例或dom中移除项目
  • 6. 利用Masonry实现瀑布流当需要排列图片div时 首先需要调用imagesLoaded() var $container = $('#container'); $container.imagesLoaded( function(){ $container.masonry({ itemSelector : '.item', columnWidth : 200}); } );
  • 7. reload实现加载var $boxes = $('
    '); $container.prepend( $boxes ).masonry( 'reload' ); 》 prepend():全部刷新,重新布局 var html="
    "; $container.append(html).masonry("reload"); 》append():插入加载
  • 8. 何时reload?滚动事件绑定$(window).scroll() function() { //clientHeight内容可视区域的高度 var a=document.body.clientHeight; //scrollTop滚动后“不可见的内容”的高度 var b =document.body.scrollTop; //scrollHeight可滚动整体高度 var c =document.body.scrollHeight; //底footer高度 var d = $('.footer').height(); //alert(a+","+b+","+c); if(a+b>=c-d && b>100){ loadMore(); } } http://pic002.cnblogs.com/images/2010/108170/2010120215445612.gif
  • 9. div块CSS样式
  • 10. 微博分享实现微博,即微型博客(MicroBlog) 以新浪和腾讯为例: 新浪开放平台官方网站 http://open.weibo.com/widgets?cat=wb 腾讯开放平台官方网站 http://wiki.open.t.qq.com/index.php/组件使用指引
  • 11. 新浪微博分享实现地址:http://open.weibo.com/widgets?cat=wb 1、WMBL 2、官方js 3、知道url,直接window.open(); http://service.weibo.com/share/share.php href="javascript:(function(){window.open('http://service.weibo.com/share/share.php?title='+encodeURIComponent(document.title)+'&url='+encodeURIComponent(location.href)+'&pic='+encodeURIComponent('http://localhost:8080/taobaoke/jsp/images/huapi2_high.jpg||http://localhost:8080/taobaoke/jsp/images/prod2.gif')');})()"
  • 12. 腾讯微博分享实现地址:http://wiki.open.t.qq.com/index.php url:http://share.v.t.qq.com/index.php?c=share&a=index 参数说明 title 默认的文本内容或RICH化转播时的消息体标题, RICH化时,最多15个全角字符的长度 url 转播页的url pic 需要转播的图片url,多张以|连接  appkey 填写正确的appkey,转播后将显示该key的来源line1 消息体第一行的文字,最多15个全角字符的长度 line2 消息体第二行的文字,最多15个全角字符的长度 line3 消息体第三行的文字,最多50个全角字符的长度 注:除appkey外,以上参数都要进行URL编码,推荐使用encodeURIComponent。
  • 13. 腾讯微博分享实现function toQQWeibo(){ var _title = document.title; var _pic = 'http://www.sinaimg.cn/blog/developer/wiki/momo/momo003.jpg'; //var _pic = "http://localhost:8080/taobaoke/jsp/images/huapi2_high.jpg"; /* var img = document.getElementsByTagName("img"); for (var i = 0; i < img.length; i++) { _pic += img[i].src + "|"; } */ var _appkey = ""; var _source = ""; window.open('http://share.v.t.qq.com/index.php?c=share&a=index&title='+encodeURIComponent(_title)+ '&source=' + _source +'&appkey=' + _appkey+'&pic='+_pic,'_blank }
  • 14. Thanks 感谢浙大网新培训老师丁鹏风(*^__^*) 嘻嘻……