精华内容
下载资源
问答
  • <div class="pin ks-waterfall poster-grid-float"> <div class="posterimg" style="height:{{height}}px"> //这里的height是重点 <a href="/area/photo/{{id}}" title="{{description}}" target="_blank"><img ...

    ff和google不同,如果图片没有加载完成是不占高度的。这样在瀑布流展示时,由于一瞬间图片还没有下载下来,这样瀑布流模块的高度计算(也就是top值的计算)是没有图片的高度,当图片加载完成后,上一个模块往下撑开,就会被下面模块遮挡,出现重叠的bug。

     

     

    解决方法:在照片的div上高度写死。由于瀑布流的图片高度是预先知道的,这样可以在图片的div上写死这个高度,及时图片还未加载完成,高度也都预留好了,这样图片加载好后,就不会被遮挡了。

     

     

    <script type="tpl" id="tpl">
      <div class="pin ks-waterfall poster-grid-float">
        <div class="posterimg" style="height:{{height}}px"> //这里的height是重点
          <a href="/area/photo/{{id}}" title="{{description}}" target="_blank"><img alt="{{photoDesc}}" src="{{coverpath_x200}}" height="{{height}}"/></a>
          <div class="postermask" style="display:none;"><a href="/area/photo/{{id}}" title="{{photoDesc}}" target="_blank">{{photoDesc}}</a></div>
        </div>
        <div class="poster-grid-user clearfix">
          <a class="fleft" href="/user/{{mid}}" target="_blank">
            <img src="{{userPhoto}}" alt="{{mname}}">
          </a>
          <div class="fleft">
            <a class="fcblue" href="/user/{{mid}}" target="_blank">{{mname}}</a>
            <br />
            <span>{{posttimeStr}}</span>
          </div>
          <div class="fright">
            <div><a title="好评" href="/area/photo/{{id}}#comments" class="dot-goodmini">{{goodnum}}</a></div>
            <div><a title="回应" href="/area/photo/{{id}}#respond" class="dot-commentmini">{{reviewnum}}</a></div>
          </div>
        </div>
      </div>
    </script>
    展开全文
  • origin 三维坐标中 多条曲线 waterfall 绘图

    备注:2017年7月7日 for 秦嘉嵘博士

     

    1、origin 初步结果图:

     

    2、origin 之 waterfall

    先 选中数据

     

    多条曲线 分组 在 不同平面:

                  origin 根据数据表格中的 comments 对曲线 进行分组

                                        同一组 的曲线 将显示在 同一平面中

     

    多条曲线 设置不同颜色

              1、independent:独立自主的;不相关连的

     

            2、color

    展开全文
  • 一、安装Waterfall npm install vue-waterfall-plugin -s 二、在组件中引入并使用 <template> <div> <Waterfall ref="waterfall" :list="lotList" :gutter="13" backgroundColor="#ffffff" :...

    一、安装Waterfall

    npm install vue-waterfall-plugin -s
    

    二、在组件中引入并使用

    <template>
        <div>
             <Waterfall ref="waterfall" :list="lotList" :gutter="13"  backgroundColor="#ffffff" 
        :breakpoints="{500: { rowPerView: 2,}}">
            <template slot="item" slot-scope="props">
                     <div class="water" :class="block?'showWater':''">
                         <img :src="props.data.mediumUrl" alt=""  @load="$refs.waterfall.refresh()" style="width:100%">
                         <div class="d-flex flex-wrap">
                             <div style="color:#000000;font-size:0.28rem;padding:0 0.2rem">
                               <span class="com-color" style="margin-right:0.2rem;display:inline-block">Lot {{props.data.lotNum}}</span><span style="margin-right:0.13rem">{{props.data.lotAuthor}}</span><span>{{props.data.createYear}}</span><span>{{props.data.lotName}}</span>
                             </div>
                         </div>
                         <div class="com-color" style="padding-left:0.2rem;margin-top:0.1rem"><span>估价 </span>&yen {{props.data.assessValue|currency}} - {{props.data.assessEndValue|currency}}</div>
                     </div>
                 </template>
             </Waterfall>
        </div>
    </template>
    <script>
           import Waterfall from "vue-waterfall-plugin";
           import {otlist} from "./api/special"
          export default({
    	      components:{
    	            Waterfall:Waterfall
    	        },
                data(){
                     param:{
                       specId:75,
                      orderColumn:1,
                      direction:'asc',//asc升序 desc降序
                      size:10,
                      current:1,
                      lotName:null,
                    },
                    lotList:[],
                },
                mounted(){
                      var  that = this;
                      lotlist(that.param).then(res=>{
                        that.specList = res.data.data.records;
                    })
                }
          })
    </script>
    <style lang="scss" scoped>
         .com-color{color:#A57A44;}
         .water{
            display:none;
            text-align: left;
            color:#000000;
            padding-bottom:0.15rem;
            box-shadow: 0 1px 3px rgba(34, 25, 25, .4);
            -moz-box-shadow: 0 1px 3px rgba(34, 25, 25, .4);
            -webkit-box-shadow: 0 1px 3px rgba(34, 25, 25, .4);
            filter: progid:DXImageTransform.Microsoft.Shadow(color = #adacac, direction = 135, strength = 2);
            .top{
                margin: 0.1rem 0;
                // white-space: nowrap;
                // overflow: hidden;
                // text-overflow: ellipsis;
            }
            &.showWater{display:block}
        }
    </style>
    

    三、效果图如下

    在这里插入图片描述
    注意:第一次请求展示数据的时候图片会重叠具体原因我现在还不清楚,只能用个定时器延迟展示瀑布流模块才能正常使用,有明白原因的伙伴欢迎留言告知

    展开全文
  • waterfall无限动态加载图片支持手机移动端的瀑布流插件
  • 插件描述:jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件。演示地址:http://www.jq22.com/jquery-info9336
  • waterfall是一款响应式无限动态加载图片瀑布流特效jQuery插件。 waterfall瀑布流特效使用ajax调用来动态加载图片,达到无限加载的效果。 使用方法 使用这个瀑布流插件需要引入jQuery.min.js和jquery.waterfall.js...

    waterfall是一款响应式无限动态加载图片瀑布流特效jQuery插件。 waterfall瀑布流特效使用ajax调用来动态加载图片,达到无限加载的效果。

    使用方法


    使用这个瀑布流插件需要引入jQuery.min.jsjquery.waterfall.js文件。

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/jquery.waterfall.js"></script>
    复制代码

    HTML结构


    该瀑布流特效的HTML结个使用一个<div>来包裹图片,然后在外围使用一个<div>作为包裹容器。

    <div id="demo">
      <div class="box"><img src="img/01.jpg" alt=""></div>
      <div class="box"><img src="img/02.jpg" alt=""></div>
      <div class="box"><img src="img/03.jpg" alt=""></div>
      ...
    </div>
    复制代码

    CSS样式


    DEMO中给出了这个瀑布流的基本样式,你可以自行修改为你需要的瀑布流样式。

    #demo {
      margin: auto;
      position: relative;
    }
      
    .box {
      float: left;
      padding: 10px;
      border: 1px solid #ccc;
      background: #f7f7f7;
      box-shadow: 0 0 8px #ccc;
    }
      
    .box:hover { box-shadow: 0 0 10px #999; }
      
    .box img { width: 200px; }
    复制代码

    调用插件


    插件使用Javascript来生成网格瀑布流布局。使用ajaxCallback来在页面向下滚动的时候对图片进行动态加载,以达到无限瀑布流的效果。

    $("#demo").waterfall({
      itemClass: ".box",
      minColCount: 2,
      spacingHeight: 10,
      resizeable: true,
      ajaxCallback: function(success, end) {
        var data = {"data": [
          { "src": "03.jpg" }, { "src": "04.jpg" }, { "src": "02.jpg" }, { "src": "05.jpg" }, { "src": "01.jpg" }, { "src": "06.jpg" }
        ]};
        var str = "";
        var templ = '<div class="box" style="opacity:0;filter:alpha(opacity=0);"><div class="pic"><img src="img/{{src}}" /></div></div>'
      
        for(var i = 0; i < data.data.length; i++) {
          str += templ.replace("{{src}}", data.data[i].src);
        }
        $(str).appendTo($("#div1"));
        success();
        end();
      }
    });
    复制代码

    演示demo


    传送门,点击查看demo

    配置参数


    下面是waterfall.js该瀑布流特效的可用参数

    参数 默认值 描述
    itemClass "waterfall-item" 图片网格元素的class名称
    spacingWidth 10 图片网格元素的水平间距
    spacingHeight 10 图片网格元素的垂直间距
    minColCount 2 瀑布流布局的最小列数
    resizeable false 是否在浏览器窗口缩放时触发positionAll()方法
    itemAlign "center" 图片网格元素的对齐方式,可选:center|left
    isFadeIn true 是否在加载图片时使用淡入淡出效果
    ajaxCallback null ajax回调函数,有2个可用参数:success, end

    声明

    本文章摘抄于网络,自我学习笔记更新,感谢原是作者分享!

    转载于:https://juejin.im/post/5c81323c6fb9a049cd54fb4d

    展开全文
  • <code>shape、<code>leader-line、<code>tooltip、<code>label</code></li>[x] 支持配置瀑布涨跌和总计值颜色:<code>waterfallStyle</code> 和 <code>color</code> </li><li>[x] 事件,同 column ...
  • 最近做一个项目需要用到jQuery Waterfall插件-瀑布流图片显示 jquery waterfall plugin,like Pinterest 、 huaban.com 、 faxianla.com 下载地址: waterfall plugin
  • 转载于:https://www.cnblogs.com/vitas/p/11503962.html
  • 使用场景:瀑布通常用于肿瘤学相关研究,以图形方式表示每个受试者/样本对治疗的定量反应。在典型的瀑布中,x轴用作响应变量的基线值。对于每个受试者/样本,从基线沿正向或负向绘制竖线,以描绘受试者/样本响应...
  • waterfall.js

    2018-03-04 21:36:00
    jq-waterfall是一款仿Pinterest网站的响应式无限动态加载图片瀑布流特效jQuery插件。该瀑布流特效使用ajax调用来动态加载图片,达到无限加载的效果。它使用简单,兼容性好,值得推荐! 使用方法 使用这个瀑布流...
  • waterFall.zip

    2020-04-05 17:05:12
    利用jQuery实现瀑布流效果,完整HTML和JS代码,可直接运行查看。代码实现思路主要是利用数组存储每一列的高度,并将下一张图片追加到高度值最小的位置,并设置图片的绝对定位。
  • vue-waterfall2 1.宽度自适应,数据绑定 2.自定义程度高 3.使用极为简便,适用于PC/移动端 4.提供resize(强制刷新布局)/mix(扰乱布局) API,一般情况下不需要用到 5.后期将持续更新,提供animation(过渡动画)...
  • $("#waterfall").waterfall("div.dym-dl", {index: 3}) }); </script> HTML代码: <div id="waterfall" class="waterfall"> <div class="dym-dl"> <div class="dym"><a href="#...
  • <div><p>之前使用waterfall都是用程序先获得图片的高度的。在U站环境中无法获得商品图片的高度。waterfall组件出现部分重叠。请教下怎么样在图片输出完之后,再使用waterfall。感激不尽</p><p>该提问来源于...
  • $.fn.waterFall 定义这个方法。$,extend()用来拓展。 js 代码: // 1、编写插件开发基本方法 ; (function ($) { $.fn.waterFall = function () { // 2、声明一个对象,用来给每个图片盒子设置属性 var ...
  • 微信小程序瀑布流waterfall简单的实现方法。 不需要知道图片的尺寸比例,也不需要大量的代码,简单又适用。
  • 昨天(2007年4.30日)从微软check out的时候有两个感受和想法:1,离开了工作近两年的地方,很是恋恋不舍2,决定写一...在这篇文章里我打算介绍一下waterfall模型和XP的一些区别。两种模型的示意如下: Plan → S...
  • 所谓瀑布模型是将软件生存周期的各项活动规定为按固定顺序而连接的若干阶段工作,形如瀑布流水,最终得到软件产品。 1970年温斯顿·罗伊斯(Winston Royce)提出了著名的...经典的Waterfall软件工程模型包括以下几...
  • 1、waterfall含义详解 浏览器根据html中外连资源出现的顺序,依次放入队列(Queue),然后根据优先级确定向服务器获取资源的顺序。同优先级的资源根据html中出现的先后顺序来向服务器获取资源 Queuing(排队) ...
  • DEMO 1.前言: 瀑布流的难点 1:数组的操作; 2:图片的高度;  2.GO: /* * 代码很短,所以功能只有布局; * 但是核心就在这儿了....$.ui.waterfall.prototype = { init:function(){ this.opat = ...
  • if (waterFall.getScrollY() + waterFall.getHeight() >= waterFall.getMaxColHeight() - 20) { //滑动到底部,添加下一页内容 waterFall.addNextPageContent(false); } else if (waterFall....
  • 效果 waterfall.js /** * Created by Capricorncd. * Date: 2018/12/14 16:00 * https://github.com/capricorncd */ import App from './app.js' // 默认配置文件 const DEFAULT_OPTS = { // 外...

空空如也

空空如也

1 2 3 4 5 ... 11
收藏数 209
精华内容 83
关键字:

waterfall图