响应式照片墙html,使用React.js实现的响应式照片墙页面模板

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

"use strict";

function _classCallCheck(instance, Constructor) {

if (!(instance instanceof Constructor)) {

throw new TypeError("Cannot call a class as a function");

}

}

function _possibleConstructorReturn(self, call) {

if (!self) {

throw new ReferenceError("this hasn't been initialised - super() hasn't been called");

}

return call && (typeof call === "object" || typeof call === "function") ? call : self;

}

function _inherits(subClass, superClass) {

if (typeof superClass !== "function" && superClass !== null) {

throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);

}

subClass.prototype = Object.create(superClass && superClass.prototype, {

constructor: {

value: subClass,

enumerable: false,

writable: true,

configurable: true

}

});

if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;

}

var Layout = window.ReactSimpleMasonry;

var Block = function Block(_ref) {

var width = _ref.width;

var height = _ref.height;

var x = _ref.x;

var y = _ref.y;

var children = _ref.children;

return React.createElement(

"div", {

className: "Block",

style: {

width: width,

height: height,

transform: "translateX(" + x + "px) translateY(" + y + "px)"

}

},

children

);

};

var getColumns = function getColumns(width) {

if (width > 900) return 5;

if (width > 400) return 3;

return 2;

};

var sizes = [{

"width": 651,

"height": 803

}, {

"width": 695,

"height": 899

}, {

"width": 669,

"height": 816

}, {

"width": 685,

"height": 868

}, {

"width": 602,

"height": 852

}, {

"width": 694,

"height": 833

}, {

"width": 622,

"height": 873

}, {

"width": 650,

"height": 833

}, {

"width": 695,

"height": 879

}, {

"width": 684,

"height": 827

}, {

"width": 610,

"height": 893

}, {

"width": 693,

"height": 895

}, {

"width": 694,

"height": 876

}, {

"width": 652,

"height": 891

}, {

"width": 625,

"height": 858

}, {

"width": 643,

"height": 828

}, {

"width": 654,

"height": 878

}, {

"width": 613,

"height": 809

}, {

"width": 671,

"height": 841

}, {

"width": 650,

"height": 850

}, {

"width": 604,

"height": 894

}, {

"width": 608,

"height": 826

}, {

"width": 641,

"height": 878

}, {

"width": 631,

"height": 814

}, {

"width": 664,

"height": 809

}, {

"width": 672,

"height": 893

}, {

"width": 669,

"height": 805

}, {

"width": 628,

"height": 850

}, {

"width": 674,

"height": 886

}, {

"width": 609,

"height": 843

}, {

"width": 640,

"height": 821

}, {

"width": 675,

"height": 840

}, {

"width": 602,

"height": 847

}, {

"width": 683,

"height": 855

}, {

"width": 656,

"height": 808

}, {

"width": 645,

"height": 881

}, {

"width": 671,

"height": 826

}, {

"width": 641,

"height": 883

}, {

"width": 665,

"height": 833

}, {

"width": 682,

"height": 853

}, {

"width": 680,

"height": 839

}, {

"width": 600,

"height": 872

}, {

"width": 620,

"height": 887

}, {

"width": 605,

"height": 807

}, {

"width": 639,

"height": 874

}, {

"width": 619,

"height": 853

}, {

"width": 675,

"height": 862

}, {

"width": 700,

"height": 881

}, {

"width": 613,

"height": 863

}, {

"width": 688,

"height": 878

}, {

"width": 698,

"height": 851

}];

var Demo = function(_React$Component) {

_inherits(Demo, _React$Component);

function Demo() {

_classCallCheck(this, Demo);

return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));

}

Demo.prototype.componentWillMount = function componentWillMount() {

this.setState({

width: document.body.getBoundingClientRect().width

});

};

Demo.prototype.componentDidMount = function componentDidMount() {

var _this2 = this;

window.addEventListener('resize', function() {

_this2.setState({

width: document.body.getBoundingClientRect().width

});

});

};

Demo.prototype.render = function render() {

return React.createElement(

Layout, {

className: "Layout",

width: this.state.width,

columns: getColumns(this.state.width),

gutterX: 20,

gutterY: 20,

maxHeight: 550,

collapsing: true

},

sizes.map(function(size) {

return React.createElement(

Block, {

"original-width": size.width,

"original-height": size.height

},

React.createElement("img", {

src: "http://placehold.it/" + size.width + "x" + size.height

})

);

})

);

};

return Demo;

}(React.Component);

React.render(React.createElement(Demo, null), document.querySelector('#root'));