代码之家  ›  专栏  ›  技术社区  ›  netwire

jQuery梅森角印章

  •  0
  • netwire  · 技术社区  · 12 年前

    jQuery Masonry非常棒,但是,有人能在页面的左上角看到角戳吗?我试着换成 float: left; 但这似乎并不奏效。

    此外,当我调整窗口的大小时,调整大小不会自动调整角戳。

    这是CSS

    .corner-stamp {
    width: 270px;
    height: 300px;
    padding: 10px;
    float: right;
    background: red;
    color: white;
    -moz-border-radius: 15px 0px 15px 0px;
    -webkit-border-radius: 15px 0px 15px 0px;
    border-radius: 15px 0px 15px 0px;
    }
    

    下面是JS:

    $.Mason.prototype.resize = function() {
      this._getColumns();
      this._reLayout();
    };
    $.Mason.prototype._reLayout = function(callback) {
      var $cornerStamp, cornerStampX, freeCols, i;
      freeCols = this.cols;
      if (this.options.cornerStampSelector) {
        $cornerStamp = this.element.find(this.options.cornerStampSelector);
        cornerStampX = $cornerStamp.offset().left - (this.element.offset().left + this.offset.x + parseInt($cornerStamp.css("marginLeft")));
        freeCols = Math.floor(cornerStampX / this.columnWidth);
      }
      i = this.cols;
      this.colYs = [];
      while (i--) {
        this.colYs.push(this.offset.y);
      }
      i = freeCols;
      while (i < this.cols) {
        this.colYs[i] = this.offset.y + $cornerStamp.outerHeight(true);
        i++;
      }
      this.layout(this.$bricks, callback);
    };
    $container = $("#streams");
    $container.imagesLoaded(function() {
      $container.masonry({
        itemSelector: ".stream-item",
        columnWidth: 60,
        isAnimated: false,
        isFitWidth: true,
        cornerStampSelector: '.corner-stamp'
      });
    });
    
    2 回复  |  直到 12 年前
        1
  •  0
  •   Systembolaget    12 年前

    你可能可以找到你需要的代码 right here on github

        2
  •  0
  •   biegleux piyush    12 年前

    对于float left,您最好的选择是确保“corned stamped”瓦片是您列表中的第一个瓦片。

    此外,我一直在玩角码,并注意到设置 isFitWidth: true 干扰拐角冲压。

    如果你找到了更好的左角冲压方法,请告诉我。如果你找到了一种方法,在页面的右角盖章,但将瓷砖居中,请告诉我。

    谢谢