Interchange Contents

index.html

.row
  .columns.medium-4.large-4
    h2 吹田市
    p.desp
      | 吹田市のことについて
  .columns.medium-4.large-4
    h2 茨木市
    p.desp
      | 茨木市のことについて
  .columns.medium-4.large-4
    h2 豊中市
    p.desp
      | 豊中市のことについて

Interchange Contents.markdown

Interchange Contents ('-' * 20) Smarter way responsive contents exchanges by Foundation 5

Forked from Kohki SHIKATA's Pen large 3col medium 2col small 1col.

A Pen by Nobuko Kodera on CodePen.

License.

script.js

;(function ($, window, document, undefined) {
  'use strict';

  Foundation.libs.equalizer = {
    name : 'equalizer',

    version : '5.2.2',

    settings : {
      use_tallest: true,
      before_height_change: $.noop,
      after_height_change: $.noop,
      equalize_on_stack: true
    },

    init : function (scope, method, options) {
      Foundation.inherit(this, 'image_loaded');
      this.bindings(method, options);
      this.reflow();
    },

    events : function () {
      this.S(window).off('.equalizer').on('resize.fndtn.equalizer', function(e){
        this.reflow();
      }.bind(this));
    },

    equalize: function(equalizer) {
      var isStacked = false,
          vals = equalizer.find('[' + this.attr_name() + '-watch]:visible'),
          firstTopOffset = vals.first().offset().top,
          settings = equalizer.data(this.attr_name(true)+'-init');

      if (vals.length === 0) return;
      settings.before_height_change();
      equalizer.trigger('before-height-change');
      vals.height('inherit');
      vals.each(function(){
        var el = $(this);
        if (el.offset().top !== firstTopOffset) {
          isStacked = true;
        }
      });
      if (settings.equalize_on_stack === false){
        if (isStacked) return;
      };
      

      var heights = vals.map(function(){ return $(this).outerHeight() }).get();
      if (settings.use_tallest) {
        var max = Math.max.apply(null, heights);
        vals.css('height', max);
      } else {
        var min = Math.min.apply(null, heights);
        vals.css('height', min);
      }
      settings.after_height_change();
      equalizer.trigger('after-height-change');
    },

    reflow : function () {
      var self = this;

      this.S('[' + this.attr_name() + ']', this.scope).each(function(){
        var $eq_target = $(this);
        self.image_loaded(self.S('img', this), function(){
          self.equalize($eq_target)
        });
      });
    }
  };
}(jQuery, this, this.document));

$(document).foundation();

style.css

.columns{
  border: 1px solid #ccc;
}