5Ѓ_Р яяяя#8v8T2ДсхL heightWidthRatio: 3/55Ѓ_Р#'/яяяя#8v8T2Дых&(LC height: "#{imageWidth*@props.heightWidthRatio}px"5Ѓ_Р$# яяяя#8v8T2Е9хL widthHeightRatio: 3/55Ѓ_Р#%$ яяяя#8v8T2Е:хL widthHeightRatio: 3/5Ѓ_Р$&% яяяя#8v8T2Е:хL widthHeightRatio: 35Ѓ_Р%'& яяяя#8v8T2Е:хL widthHeightRatio: 5Ѓ_Р&('яяяя#8v8T2ЗхM хL5Ѓ_Р')(яяяя#8v8T2З!х 5Ѓ_Р(*)яяяя#8v8T2З"хM5Ѓ_Р)+*яяяя#8v8T2З%х O х N5Ѓ_Р*,+яяяя#8v8T2З?х O( children: React.PropTypes.isRequired5Ѓ_Р+-,< яяяя#8v8T2И^х<>O5Ѓ_Р,.-яяяя#8v8T2Иnх console.log @props5Ѓ_Р-/.яяяя#8v8T2Иoх( console.log @calculateImageWidth()5Ѓ_Р.0/Nяяяя#8v8T2ИлхM. @setState width: @getDOMNode().offsetWidth5Ѓ_Р/10яяяя#8v8T2ИчхN if @state.width isnt 05Ѓ_Р021:%яяяя#8v8T2Иых9;N> imagesPerRow = Math.round(@state.width/@props.targetWidth)5Ѓ_Р132Cяяяя#8v8T2ЙхBDN* rawWidth = @state.width / imagesPerRow5Ѓ_Р243яяяя#8v8T2РkхOхN5Ѓ_Р354!яяяя#8v8T2Р}хPхO5Ѓ_Р465яяяя#8v8T2РЂх mixins5Ѓ_Р576яяяя#8v8T2РЂхP хO5Ѓ_Р687яяяя#8v8T2Р‹хP @onResize()0 elementResizeEvent(@getDOMNode(), @onResize)5Ѓ_Р8:9яяяяVT2Р™х3elementResizeEvent = require 'element-resize-event'5Ѓ_Р9;:IяяяяKIVT2Р›хHI onResize: ->7 @setState componentWidth: @getDOMNode().offsetWidth5Ѓ_Р:K;яяяяIIVT2Ц]"хI хH5Ѓ_Р;L<KяяяяJJVT2Ъ‘#х console.log @state5Ѓ_РKML4яяяяIIVT2ах46I х46H5Ѓ_РLNM6яяяя6&G&V&T2а>х5HI1 # Calculate the # of images per row to place.6 imageCount = React.Children.count(@props.children)G imagesPerRow = Math.round(@state.componentWidth/@props.targetWidth)1 # There has to be at least one image per row., imagesPerRow = Math.max(imagesPerRow, 1) if imagesPerRow > imageCount imagesPerRow = imageCount= # Calculate the per-image width with space for in-between # images subtracted3 rawWidth = @state.componentWidth / imagesPerRowW marginRightOffset = ((@props.margin * imagesPerRow) - @props.margin) / imagesPerRow4 imageWidth = rawWidth - marginRightOffset - 0.25 # Don't get too big.U maxWidth = if @props.maxWidth? then @props.maxWidth else @props.targetWidth * 1.5/ imageWidth = Math.min(imageWidth, maxWidth)5Ѓ_РMON8яяяя6&G&V&T2аGх8:J х8:I5Ѓ_РNPOH+яяяя6&H&V&T2аSхHKK хHJJ5Ѓ_РOQPHяяяя6&H&V&T2а\хHJM хHJL5Ѓ_РPRQIяяяя6&H&V&T2аfхHJM [imagesPerRow, 5Ѓ_РQSRIяяяя6&H&V&T2аfхHJM [imagesPerRow 5Ѓ_РRTSIяяяя6&H&V&T2аgхHJM [imagesPerRow5Ѓ_РSUTIяяяя6&H&V&T2аhхHJM [imagesPerRow]5Ѓ_РTVUKяяяя6&H&V&T2аnхJLM _calcImageWidth5Ѓ_РUWVK яяяя6&H&V&T2аxхKNN хKMM5Ѓ_РVXWKяяяя6&H&V&T2аЂхJLO0 [imageWidth, imagesPerRow] = _calcImageWidth5Ѓ_РWYXIяяяя6&H&V&T2а…хHJO [imageWidth, imagesPerRow]5Ѓ_РXZYMяяяя6&H&V&T2а€хLNO if imageWidth5Ѓ_РY[ZM$яяяя6&H&V&T2ађхMOOхMNO5Ѓ_РZ\[Nяяяя6&H&V&T2а‘хMOPC [imageWidth, imagesPerRow, marginRightOffset] = _calcImageWidth5Ѓ_Р[]\NEяяяя6&H&V&T2а”хMOPE [imageWidth, imagesPerRow, marginRightOffset] = _calcImageWidth5Ѓ_Р\^]KCяяяя6&H&V&T2а–хJLPC [imageWidth, imagesPerRow, marginRightOffset] = _calcImageWidth5Ѓ_Р]_^Jяяяя6&H&V&T2аљ$хJLQ хJLP5Ѓ_Р^`_5%яяяя6&H&V&T2аР%х46Q' _calcImageWidth = (refineUp = 0) ->5Ѓ_Р_a`Iяяяя6&H&V&T2аф&хHJQ3 [imageWidth, imagesPerRow, marginRightOffset]5Ѓ_Р`baHяяяя6&H&V&T2аю'хHJR хHJQ5Ѓ_РacbLяяяя6&H&V&T2б'хKL! console.log marginRightOffset5Ѓ_РbdcLяяяя6&H&V&T2б'(хLNQхLMQ5Ѓ_РcedMяяяя6&H&V&T2в…хLNR! console.log marginRightOffset5Ѓ_РdfeM4яяяя6&H&V&T2вЊ)хLNR4 console.log "total margin: " + marginRightOffset5Ѓ_РegfO%яяяя6&H&V&T2вЖ*хNPR% if imageWidth < marginRightOffset5Ѓ_РfhgP3яяяя6&H&V&T2гхPRRхPQR5Ѓ_РgihQяяяя6&H&V&T2гхPRSC console.log "total margin: " + marginRightOffset * imagesPerRow5Ѓ_РhjiQяяяя6&H&V&T2г+хPRSE console.log "total margin: " + marginRightOffset * imagesPerRow5Ѓ_Рikj8&яяяя6&H&V&T2дЖх8:T х8:S5Ѓ_Рjlk:яяяя6&I&V&T2дК,х:<Tх:;T5Ѓ_Рkml:"яяяя6&J&V&T2дЮх9;U, imagesPerRow = imagesPerRow + refineUp5Ѓ_Рlnm:$яяяя6&J&V&T2дЯх9;U, imagesPerRow = imagesPerRow - refineUp5Ѓ_Рmon5яяяя6&J&V&T2дкх46U' _calcImageWidth = (refineUp = 0) =>5Ѓ_Рnpo5яяяя6&J&V&T2дпх46U) _calcImageWidth = (adjustDown = 0) =>5Ѓ_Рoqp:$яяяя6&J&V&T2дч-х9;U. imagesPerRow = imagesPerRow - refineDown5Ѓ_РprqSяяяя6&J&V&T2ењхRSM console.log "total margin round 2: " + marginRightOffset * imagesPerRow5Ѓ_Рqsr9яяяя6&J&V&T2еџх89 console.log imagesPerRow5Ѓ_Рrts:яяяя6&I&V&T2еџх9: console.log imagesPerRow5Ѓ_РsutIяяяя6&H&V&T2еЎхHI= console.log imageWidth, imagesPerRow, marginRightOffset5Ѓ_РtvuLяяяя6&H&V&T2еЈхKLC console.log "total margin: " + marginRightOffset * imagesPerRow5Ѓ_РuwvLяяяя6&H&V&T2еҐ.хLOQ хLNP5Ѓ_РvxwOяяяя6&H&V&T2жLхOQS хOQR5Ѓ_РwyxPяяяя6&H&V&T2жjхOQS= Math.round(marginRightOffset*imagesPerRow % imageWidth)5Ѓ_РxzyQFяяяя6&H&V&T2жmхPRSH [imageWidth, imagesPerRow, marginRightOffset] = _calcImageWidth(1)5Ѓ_Рy{zQFяяяя6&H&V&T2жm/хPRSG [imageWidth, imagesPerRow, marginRightOffset] = _calcImageWidth()5Ѓ_Рz|{PIяяяя6&H&V&T2жq0хPRT хPRS5Ѓ_Р{}|O)яяяя6&H&V&T2жЏхOQU хOQT5Ѓ_Р|~}PяяяяQQHvHT2ж–хOQU console.log хPQU5Ѓ_Р}~P<яяяяQQHvHT2жхPRUхPQU5Ѓ_Р~ЂQяяяяRRHvHT2ж™хQSVхQRV5Ѓ_РЃЂP0яяяяP<P0v0T2ж›хOQW= console.log marginRightOffset*imagesPerRow % imageWidth5Ѓ_РЂ‚ЃRяяяяP<P0v0T2жќ1хQR= console.log marginRightOffset*imagesPerRow % imageWidth5Ѓ_РЃѓ‚PяяяяP<P0v0T2ж¶2хPRW хPRV5Ѓ_Р‚„ѓR1яяяяP<P0v0T2жъхQSW= console.log marginRightOffset*imagesPerRow % imageWidth5Ѓ_Рѓ…„R0яяяяP<P0v0T2жьхQSW= console.log marginRightOffset*imagesPerRow / imageWidth5Ѓ_Р„†…RяяяяP<P0v0T2жюхQSW= console.log marginRightOffset*imagesPerRow)/ imageWidth5Ѓ_Р…‡†R3яяяяP<P0v0T2зхQSW> console.log (marginRightOffset*imagesPerRow)/ imageWidth5Ѓ_Р†€‡S=яяяяP<P0v0T2зхRTWJ adjustment = Math.round(marginRightOffset*imagesPerRow % imageWidth)5Ѓ_Р‡‰€S<яяяяP<P0v0T2зхRTWJ adjustment = Math.round(marginRightOffset*imagesPerRow / imageWidth)5Ѓ_Р€Љ‰S>яяяяP<P0v0T2зхRTWJ adjustment = Math.round(marginRightOffset*imagesPerRow)/ imageWidth)5Ѓ_Р‰‹ЉSяяяяP<P0v0T2з3хRTWI adjustment = Math.round(marginRightOffset*imagesPerRow)/imageWidth)5Ѓ_РЉЊ‹TяяяяP<P0v0T2з>хST* console.log "adjustment", adjustment5Ѓ_Р‹ЌЊPяяяяQPVT2з?хOP0 console.log marginRightOffset*imagesPerRow console.log imageWidth5Ѓ_РЊЋЌPяяяяPPVT2з@хOP= console.log (marginRightOffset*imagesPerRow)/imageWidth5Ѓ_РЌЏЋNяяяяNNvT2зKхMOS # per row by one.5Ѓ_РЋ‘ЏN яяяяNNvT2зL4хMOS # per row .5Ѓ_РЏ’ђ‘яяяяNNvT3W5хT хS5Ѓ_Р‘“’яяяяOOvT3p6х console.log @state5Ѓ_Р’”“)яяяя)*VT3yх()4 "margin-right": "#{marginRight}px"7 "margin-bottom": "#{@props.margin}px"5Ѓ_Р“•”&яяяя))VT3zх&)Qх&'Q5Ѓ_Р”–•*яяяя++VT3{7х*,T х*,S5Ѓ_Р•њ–-яяяя,,VT3(}х,.T }, child)5Ѓ_Р–ќ™њяяяяvT3(ѕхT< {React.Children.map(@props.children, (child, i) =>5Ѓ_РњћќяяяяvT3(їхT) {@props.children, (child, i) =>5Ѓ_РќџћяяяяvT3(ГхT+ {@props.images.map, (child, i) =>5Ѓ_Рћ џяяяяvT3(ЖхT* {@props.images.map (child, i) =>5Ѓ_РџЎ яяяяvT3(ЙхT( {@props.images.map (img, i) =>5Ѓ_Р ўЎ"яяяяvT3(КхT) {@props.images.map (imag, i) =>5Ѓ_РЎЈў-$яяяяvT3(Юх,.T& }, React.DOM.img({src: )5Ѓ_Рў¤Ј-,яяяяvT3(ж8х,.T. }, React.DOM.img({src: image}) )5Ѓ_РЈҐ¤/ яяяяvT3)9х.0T )}5Ѓ_Р¤¦Ґ яяяяvT3)]х T, children: React.PropTypes.any.isRequired5Ѓ_РҐ§¦ яяяяvT3)_:х T* images: React.PropTypes.any.isRequired5Ѓ_Р¦Ё§яяяяvT3)д;хU хT5Ѓ_Р§©ЁяяяяvT3*<хV хU5Ѓ_РЁ©яяяяvT3*W=хW хV5Ѓ_Р©®ЄяяяяvT3*}хX хW5Ѓ_РЇ®яяяяvT3*Ђ?хX) console.log @getDOMNode().offsetWidth5Ѓ_Р®°Ї<яяяя<<'v'T3*ґх;=X8 imageCount = React.Children.count(@props.children)5Ѓ_РЇ±°<"яяяя<<'v'T3*¶х;=X# imageCount = @props.children)5Ѓ_Р°І±<яяяя<<'v'T3*¶@х;=X" imageCount = @props.children5Ѓ_Р±іІяяяя<<'v'T3*щх console.log @state5Ѓ_РІґіяяяя;;'v'T3*щх+ console.log @getDOMNode().offsetWidth5Ѓ_Ріµґяяяя::'v'T3*ъAх* console.log imageWidth, imagesPerRow5Ѓ_Рґ¶µяяяя99'v'T3*яBх if @isMounted()5Ѓ_Рµ·¶яяяя88'v'T30xхT* {@props.images.map (image, i) =>5Ѓ_Р¶ё·яяяя99'v'T30yхU+ @props.images.map (image, i) =>5Ѓ_Р·№ёяяяя99'v'T30zхU {5Ѓ_Рёє№1яяяя99'v'T31CхU1 { # Loop over each image and create an 5Ѓ_Р№»є(яяяя99'v'T311х"V х!U5Ѓ_Рєј»0яяяя0+0vT31Aх/1W- }, React.DOM.img({src: image}))5Ѓ_Р»Ѕј0яяяя0+0vT31Aх/1W }, )5Ѓ_РјѕЅ!яяяя0+0vT31Gх "W/ image = React.DOM.img({src: image})5Ѓ_РЅїѕ0яяяя0+0vT31JDх/1W }, image)5Ѓ_РѕАїяяяя0+0vT31‰хWE { # Loop over each image and create the image grid element.5Ѓ_РїБАяяяя1+1vT31ЉхXE # Loop over each image and create the image grid element.5Ѓ_РАГБяяяя1+1vT31‹GхX { 5Ѓ_РБДВГяяяя 2 V T32"Hх3XC # Loop over each image and create the image grid element.) @props.images.map (image, i) => if imagesPerRow is 1 marginRight = 0< else if i isnt 0 and (i + 1) % imagesPerRow is 0 marginRight = 0 else) marginRight = @props.margin1 imageEl = React.DOM.img({src: image}) return ( React.DOM.div({* className: "image-wrapper" style: {* width: "#{imageWidth}px"C height: "#{imageWidth*@props.widthHeightRatio}px") display: "inline-block"4 "margin-right": "#{marginRight}px"7 "margin-bottom": "#{@props.margin}px"$ overflow: "hidden"& position: "relative") "vertical-align": "top" } }, imageEl) )5Ѓ_РГЕДяяяя 2 V T32›хYхX5Ѓ_РДЖЕ"яяяя 3 V T32·х"$Z х"$Y5Ѓ_РЕЗЖ$яяяя 4 V T32Вх#%Z3 imageEl = React.DOM.img({src: image})5Ѓ_РЖИЗ$яяяя 4 V T32Вх$'[ х$&Z5Ѓ_РЗЙИ&яяяя 6 V T32Ех%&5Ѓ_РИКЙ%яяяя 5 V T32Жх$&[ else5Ѓ_РЙЛК%%яяяя 5 V T32Нх%'\ х%'[5Ѓ_РКМЛ&8яяяя 6 V T32мх%'\D imageEl =

=яяяяLLVT2ШхJ хK* child.props.width = imageWidth5Ѓ_Р=?>*яяяяLLVT2Ш хK1 child.props.width = imageWidth + "px"5Ѓ_Р>@?яяяяLLVT2Ш)хK) console.log child, imageWidth5Ѓ_Р?A@яяяяvT2Ш°хK5 console.log child, child.type, imageWidth5Ѓ_Р@BAяяяяvT2ШГхK. console.log child.type, imageWidth5Ѓ_РACBяяяяvT2Щ хK хL( React.addons.cloneWithProps(5Ѓ_РBDC(яяяяvT2ЩхLH React.addons.cloneWithProps(child, width: imageWidth + "px")5Ѓ_РCEDяяяяvT2ЩхLP child = React.addons.cloneWithProps(child, width: imageWidth + "px")5Ѓ_РDFEяяяяvT2Щ х5Ѓ_РEGFяяяяvT2Щ(!хKReact = require 'react/addons'5Ѓ_РFHG6яяяяvT2ЩгхK6 child = React.addons.cloneWithProps(child,% width: imageWidth + "px")5Ѓ_РGIHяяяяvT2ЩехL' width: imageWidth + "px")5Ѓ_РHJI&яяяяvT2ЩзхL& width: imageWidth + "px" )5Ѓ_РIJяяяяvT2ЩкхM хN height: 5Ѓ_Р # яяяя#8v8T2Е!хL widthHeightRatio: 3/5Ѓ_Р! яяяя#8v8T2Е!хL widthHeightRatio: 35Ѓ_Р "! яяяя#8v8T2Е!хL widthHeightRatio: 5Ѓ_Р!" яяяя#8v8T2Е"хL widthHeightRatio: 15Ѓ_Ряяяя#8v8T2їtх5Ѓ_Р яяяя#8v8T0њхG targetWidth: 200 5Ѓ_Р яяяя#8v8T0њхF* targetWidth: 200 componentDidMount: ->5Ѓ_Р яяяя#8v8T0њхE6 targetWidth: 200 componentDidMount: -> @onResize()5Ѓ_Р *яяяя#8v8T0њхDc targetWidth: 200 componentDidMount: -> @onResize() elementResizeEvent(@getDOMNode(), @onResize)5ЃзЄ