在线html 布局编辑,HTML5 可在线编辑的多列布局图文页面

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

$(function() {

getBaconIpsum()

$(".panel").on("change touchend touchstart", setValues);

setValues();

});

function setValues() {

var css = "";

$(".updater").each(function() {

var $this = $(this);

var property = $this.data("change");

if (typeof property !== "undefined") {

var unit = $("." + property + "-unit").val() || "";

var prop = PrefixFree.prefixProperty(property);

if (this.value != unit) {

var val = this.value + unit;

css += "" + prop + ": " + val + ";";

$(".output").css(prop, val);

}

}

});

$(".css").html(css);

}

function getBaconIpsum() {

$.getJSON('http://baconipsum.com/api/?callback=?', {

'type': ((Math.random() > .5) ? 'meat-and-filler' : 'all-meat'),

'start-with-lorem': '1',

'paras': '15'

},

function(baconGoodness) {

if (baconGoodness && baconGoodness.length > 0) {

$(".output").html('');

for (var i = 0; i < baconGoodness.length; i++) {

var sHeader = "";

if (Math.random() > .4 || i === 0) {

var htype = parseInt(Math.random() * 4) + 1;

var header = baconGoodness[i].split(" ");

var noOfWords = parseInt(Math.random() * 10) + 2;

var wStart = parseInt(Math.random() * (header.length - noOfWords));

sHeader = "";

for (var ii = wStart; ii < wStart + noOfWords; ii++) {

sHeader += header[ii].replace(/[\.,]/ig, "") + " ";

};

sHeader += "";

}

var text = baconGoodness[i].split(" ");

text = addImage(text).join(" ");

$(".output").append(sHeader + '

' + text + '

}

}

});

}

function addImage(arr) {

var width = parseInt(Math.random() * 6) * 40 + 80;

var height = parseInt(Math.random() * 6) * 40 + 40;

var sSrc = "";

arr.splice(Math.random() * arr.length, 0, sSrc);

return arr;

}